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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
子页向父页传值示例
Nov 27 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 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
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jquery实现拖动效果
2016/08/10 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Js apply方法详解
2017/02/16 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
跟老齐学Python之数据类型总结
2014/09/24 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python的pycurl包用法简介
2015/11/13 Python
Python中property属性实例解析
2018/02/10 Python
浅谈Python基础—判断和循环
2019/03/22 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
abstract是什么意思
2012/02/12 面试题
大学生个人求职信范文
2013/09/21 职场文书
大学生求职简历的自我评价范文
2013/10/12 职场文书
外语系毕业生找工作的求职信
2013/11/28 职场文书
学术会议欢迎词
2014/01/09 职场文书
学生党支部先进事迹
2014/02/04 职场文书
办公设备采购方案
2014/03/16 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书