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实现前端分页功能
Mar 23 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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/08/08 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
别了 JavaScript中的isXX系列
2012/08/01 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python装饰器用法实例总结
2018/02/07 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
幼儿评语大全
2014/04/30 职场文书
毕业设计说明书
2014/05/07 职场文书
基层党员公开承诺书
2014/05/29 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
春风化雨观后感
2015/06/11 职场文书
湘江北去观后感
2015/06/15 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书