BootStrap Select清除选中的状态恢复默认状态


Posted in Javascript onJune 20, 2017

PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件;

当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢?

如【图1】

BootStrap Select清除选中的状态恢复默认状态

当我们选择摸一个条件之后

如【图2】

BootStrap Select清除选中的状态恢复默认状态

此时点击重置按钮要将【图2】的状态回到【图1】,我们会使用很多方法,比如:          

$("#loc_province_search").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $("#loc_city_search").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $("#loc_town_search").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $(".txt_classification").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $(".txt_industry").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $(".txt_segmentation").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $(".customer_busi_status2").attr("lang",'0');//将下拉列表属性lang置为初始值 
      $("#searchkey").attr("lang",'0');//将下拉列表属性lang置为初始值</span>

或者这样:

document.getElementById("selectid").options.length = 0;

但是我们找了很多方法对于bootstrap-select下拉框都不会生效,其实就是因为bootstrap-select需要在清楚的基础上对当前的下拉框进行刷新,重新载入

代码如下:

document.getElementById("searchPayState").options.selectedIndex = 0; //回到初始状态
  $("#searchPayState").selectpicker('refresh');//对searchPayState这个下拉框进行重置刷新

以上代码即可解决问题

以上所述是小编给大家介绍的BootStrap Select清除选中的状态恢复默认状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
Vue实现路由跳转和嵌套
Jun 20 #Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 #Javascript
JS中的三个循环小结
Jun 20 #Javascript
详解Vue 方法与事件处理器
Jun 20 #Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
Json解析的方法小结
2016/06/22 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python中subprocess批量执行linux命令
2018/04/27 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
pandas的qcut()方法详解
2019/07/06 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
读书心得体会
2013/12/28 职场文书
实习护士自荐信
2015/03/25 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers