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 节点遍历函数
Mar 28 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
JS实现横向轮播图(初级版)
Jun 24 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的魔术常量__METHOD__简介
2014/07/08 PHP
php经典算法集锦
2015/11/14 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
chrome原生方法之数组
2011/11/30 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
理解Python中函数的参数
2015/04/27 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
python中的变量如何开辟内存
2018/06/26 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python list多级排序知识点总结
2019/10/23 Python
python实现低通滤波器代码
2020/02/26 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python脚本调试工具安装过程
2021/01/11 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
计算机应用专业自荐信
2014/07/05 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
公司会议开幕词
2015/01/29 职场文书
店长岗位职责
2015/02/11 职场文书
城管个人总结
2015/02/28 职场文书
英文辞职信范文
2015/05/13 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL