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 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vue select 获取value和lable操作
Aug 28 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
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
jquery 插件学习(六)
2012/08/06 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
利用python发送和接收邮件
2016/09/27 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python绘制漏斗图步骤详解
2019/03/04 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
基于python监控程序是否关闭
2020/01/14 Python
浅谈Python3中print函数的换行
2020/08/05 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
我的祖国演讲稿
2014/05/04 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
部队个人年终总结
2015/03/02 职场文书
心术观后感
2015/06/11 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android