Jquery和CSS实现选择框重置按钮功能


Posted in jQuery onNovember 08, 2018

很多时候我们都会用到一个下拉选择,还有就是重置的功能,今天我们就给大家带来用Jquery配合CSS实现的这个功能。

代码如下:

HTML

<select>
 <option value="">Select a color..</option>
 <option value="red">Red</option>
 <option value="green">Green</option>
 <option value="blue">Blue</option>
</select>
<div class="displaySelect">
 <span class="value"></span>
 <span class="close">⊗</span>
 </div>

CSS

.displaySelect{
 display:none;
 border: 1px solid;
 }
 select, .displaySelect {
 text-indent:20px;
 font-family:helvetica;
 }
 select, .displaySelect{
 font-size:22px;
 height:50px;
 line-height:50px;
 width:100%;
 text-transform:capitalize;
 }
 .displaySelect .close{
 display:block;
 float:right;
 width:10%;
 text-align:center;
 font-size:52px;
 cursor:pointer;
 }

Jquery

var select  = $('select');
var selectResults = $('.displaySelect');
var selectValue = $('.value', selectResults);
var selectClose = $('.close', selectResults);
select.on('change', function() {
 $(this).add(selectResults).toggle();
 selectValue.html(this.value);
 });
 selectClose.click(function(){
 select.val('').fadeIn();
 selectResults.toggle();
 selectValue.html('');
 });

效果如下:

Jquery和CSS实现选择框重置按钮功能

以上就是本次的效果图片,感谢大家对三水点靠木的支持。

jQuery 相关文章推荐
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
jquery使用FormData实现异步上传文件
Oct 25 #jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 #jQuery
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
You might like
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
javascript 动态创建表格
2015/01/08 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
React快速入门教程
2017/01/17 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
Python补齐字符串长度的实例
2018/11/15 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
岗位廉政承诺书
2014/03/27 职场文书
《去年的树》教学反思
2014/04/11 职场文书
实习推荐信
2014/05/10 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书