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 Plupload上传插件的使用
Apr 19 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jQuery中使用validate插件校验表单功能
May 24 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jquery简易手风琴插件的封装
Oct 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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目录与文件操作
2011/12/30 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php批量修改表结构实例
2017/05/24 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
webpack优化的深入理解
2018/12/10 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python dataframe NaN处理方式
2019/12/26 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
教师评语大全
2014/04/28 职场文书
片区教研活动总结
2014/07/02 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs