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的前端数据通用验证库
Aug 08 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
vuex实现购物车功能
Jun 28 Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
论建造顺序的重要性
2020/03/04 星际争霸
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
Python 如何对文件目录操作
2020/07/10 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
scrapy-splash简单使用详解
2021/02/21 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
课改先进个人汇报材料
2014/01/26 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
实习护士自荐信
2014/06/21 职场文书
专项资金申请报告
2015/05/15 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL