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实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
javascript实现简易的计算器
Jan 17 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
js实现淘宝浏览商品放大镜功能
Oct 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
PHP4中实现动态代理
2006/10/09 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
JS函数this的用法实例分析
2015/02/05 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python如何实时获取tcpdump输出
2020/09/16 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
运动会广播稿80字
2014/01/23 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers