BootStrap Select清除选中的状态恢复默认状态

 更新时间:2017年06月20日 14:09:00   作者:LLDD2014425程序猿  
PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件;当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢?下面通过本文给大家介绍下,需要的的朋友参考下吧

PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件;

当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢?

如【图1】

图1

当我们选择摸一个条件之后

如【图2】

这里写图片描述

此时点击重置按钮要将【图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清除选中的状态恢复默认状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • uni app跨端自定义指令实现按钮权限

    uni app跨端自定义指令实现按钮权限

    这篇文章主要为大家介绍了uni app跨端自定义指令实现按钮权限详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JavaScript中的 Date(日期)对象及使用示例

    JavaScript中的 Date(日期)对象及使用示例

    JavaScript中的Date对象是一个内置对象,提供了创建、操作、格式化日期和时间的方法,通过new Date()构造函数可以创建Date实例,支持多种参数格式,本文给大家介绍JavaScript中的 Date(日期)对象及使用示例,感兴趣的朋友跟随小编一起看看吧
    2024-10-10
  • JavaScript 读URL参数增强改进版版

    JavaScript 读URL参数增强改进版版

    网上有不少JavaScript 读 URL 参数的函数,但没考虑到 URL 中带 # 符的情况,我的可以处理这种情况,并使用了点对象写法,优化了些性能。
    2008-10-10
  • js中this的用法实例分析

    js中this的用法实例分析

    这篇文章主要介绍了js中this的用法,实例分析了js中this的4种常见用法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • vue(javaScript)操作字符串的一些常用方法总结

    vue(javaScript)操作字符串的一些常用方法总结

    在平时前端开发中,我们不难发现经常会用到字符串操作,这篇文章主要给大家介绍了关于vue(javaScript)操作字符串的一些常用方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • 微信小程序学习笔记之目录结构、基本配置图文详解

    微信小程序学习笔记之目录结构、基本配置图文详解

    这篇文章主要介绍了微信小程序学习笔记之目录结构、基本配置,结合实例形式详细分析了微信小程序的相关注册、配置及基本使用方法,并配以图片加以说明,需要的朋友可以参考下
    2019-03-03
  • 基于BootstrapValidator的Form表单验证(24)

    基于BootstrapValidator的Form表单验证(24)

    这篇文章主要为大家详细介绍了基于BootstrapValidator的Form表验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • TypeScript 中使用 getter 和 setter的方法

    TypeScript 中使用 getter 和 setter的方法

    这篇文章主要介绍了TypeScript 中如何使用 getter 和 setter, getter使我们能够将属性绑定到在访问属性时调用的函数,而 setter 将属性绑定到在尝试设置属性时调用的函数,需要的朋友可以参考下
    2023-04-04
  • 基于代数方程库Algebra.js解二元一次方程功能示例

    基于代数方程库Algebra.js解二元一次方程功能示例

    这篇文章主要介绍了基于代数方程库Algebra.js解二元一次方程功能,结合具体实例形式分析了方程库Algebra.js计算方程的具体使用技巧,需要的朋友可以参考下
    2017-06-06
  • 分享一个原生的JavaScript拖动方法

    分享一个原生的JavaScript拖动方法

    本文给大家分享的是基于JavaScript的setCapture方法实现的拖动效果,非常的简单实用,有需要的小伙伴可以参考下
    2016-09-09

最新评论