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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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共享内存段示例分享
2014/01/20 PHP
php实现短信发送代码
2015/07/05 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jQuery链使用指南
2015/01/20 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
自荐信怎么写呢?
2013/12/09 职场文书
暑期实践思想汇报
2014/01/06 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Kubernetes控制节点的部署
2022/04/01 Servers
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
MySQL三种方式实现递归查询
2022/04/18 MySQL
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript