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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
AngularJS快速入门
Apr 02 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
Python中获取对象信息的方法
2015/04/27 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python实现超市商品销售管理系统
2019/10/25 Python
wxPython实现带颜色的进度条
2019/11/19 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
目标责任书范本
2014/04/16 职场文书
还款承诺书范文
2014/05/20 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
刑事和解协议书范本
2014/11/19 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书