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 dataTable 获取某行数据
May 05 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 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函数解决SQL injection
2006/12/09 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
用Python解决计数原理问题的方法
2016/08/04 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
德国高尔夫商店:Par71.de
2020/11/29 全球购物
园林设计师自荐信
2013/11/18 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers