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 dom 操作详解 js加强
Jul 13 Javascript
JQuery 学习笔记 选择器之四
Jul 23 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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 文件上传类代码
2011/08/06 PHP
php Calender(日历)代码分享
2014/01/03 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP 断点续传实例详解
2017/11/11 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
原生js实现日历效果
2020/03/02 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
Python守护进程用法实例分析
2015/06/04 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
应用化学专业职业生涯规划书
2013/12/31 职场文书
幼儿园标语大全
2014/06/19 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
大学生党课心得体会
2016/01/07 职场文书