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 相关文章推荐
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
Javascript this 的一些学习总结
Aug 31 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
详解vue中组件参数
Jul 09 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
小程序如何构建骨架屏
May 29 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
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多个图片压缩成ZIP的方法
2020/08/18 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
php post换行的方法
2020/02/03 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
JavaScript新增样式规则(推荐)
2016/07/19 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python制作爬虫采集小说
2015/10/25 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
毕业生个人求职信范文分享
2014/01/05 职场文书
学校消防演习方案
2014/02/19 职场文书
中介业务员岗位职责
2014/04/09 职场文书
信息员培训方案
2014/06/12 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
九寨沟导游词
2015/02/02 职场文书
2015年技术员工作总结
2015/04/10 职场文书
Python实现拼音转换
2021/06/07 Python
Go语言并发编程 sync.Once
2021/10/16 Golang