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 实现复制到粘贴板的功能代码
May 13 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
ES6中的箭头函数实例详解
Apr 06 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
Element Backtop回到顶部的具体使用
Jul 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
php zip文件解压类代码
2009/12/02 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
介绍Python中内置的itertools模块
2015/04/29 Python
浅谈Django的缓存机制
2018/08/23 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
竞争上岗演讲稿
2014/01/05 职场文书
高一生物教学反思
2014/01/17 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
税务会计岗位职责
2014/02/18 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
工商局调档介绍信
2015/10/22 职场文书
js之ajax文件上传
2021/05/13 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js