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

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

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

如【图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清除选中的状态恢复默认状态，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap中关于Select下拉框选择触发事件及扩展

    BootStrap中关于Select下拉框选择触发事件及扩展

    Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项. 这个很好解决: 如下: <div class="page-header"> <div class="form-horizontal"> <div class="control-label col-lg-0"> </div> <div class="col-lg-2"> <

  • JS组件Bootstrap Select2使用方法解析

    JS组件Bootstrap Select2使用方法解析

    本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下 效果图: 无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及: {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-

  • BootStrap selectpicker

    BootStrap selectpicker

    mark 一下使用 bootstrap selectpicker 遇到的一个小issue,作为下次查错使用 $('.selectpicker').selectpicker('val', 'Mustard');//单选 $('.selectpicker').selectpicker('val', ['Mustard','Relish']);//多选$('.selectpicker').selectpicker('refresh'); 可以刷新显示 mark一下问题:设置的val必须为option里

  • Bootstrap select多选下拉框实现代码

    Bootstrap select多选下拉框实现代码

    前言 项目中要实现多选,就想到用插件,选择了bootstrap-select. 附上官网api链接,http://silviomoreto.github.io/bootstrap-select/. 没有中文的.对付看吧.有机会每个方法实践一下,会总结的.我自己也等着呢. 需要引用的它们 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cl

  • BootStrap的select2既可以查询又可以输入的实现代码

    首先关键一句话: $(".js-example-tags").select2({ tags: true }) 别小看此代码功能可谓强大,在需要的地方直接加进去class如下代码所示: <div class="form-group required"> <label class="control-label col-sm-4">测试select2: </label> <div class="col

  • Bootstrap框架下下拉框select搜索功能

    Bootstrap框架下下拉框select搜索功能

    之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索 心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js 不区分大小写,模糊匹配,哈哈,太棒了~~ 具体用法: <script type="text/javascript" src="<%=basePath%>/js/commons/jquery

  • bootstrapValidator bootstrap-select验证不可用的解决办法

    如何解决bootStrapValidator bootStrap-select验证不可用,只要三步: 思路:把多选下拉框的选中值,赋给一个隐藏的input组件,再对input组件进行验证(bootstrap-validator默认情况下hidden,disabled的组件不验证,可以通过excluded属性更改),具体步骤如下: 1.表单验证初始化(js) $('#myModalForm').bootstrapValidator({ message: 'This value is not val

  • BootStrap select2 动态改变值的方法

    1,selec2动态赋值 var temp=JSON.stringify({ id: "1|所有停车场", name: "所有停车场" }); $("#e_pid").attr("value", tempP); $("#e_pid").select2({ placeholder: "查找停车场名称(多选)", language: "zh-CN", minimumInp

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

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

    PC端项目中经常会出现大量的数据列表页面,涉及到下拉框选择筛选条件: 当时用到bootstrap-select下拉框时该如何点击重置按钮就清除下拉框的选中状态呢? 如[图1] 当我们选择摸一个条件之后 如[图2] 此时点击重置按钮要将[图2]的状态回到[图1],我们会使用很多方法,比如: $("#loc_province_search").attr("lang",'0');//将下拉列表属性lang置为初始值 $("#loc_city_search&quo

  • jQuery 获取select选中值及清除选中状态

    不会使用jQuery的后台真心伤不起,获取select下拉列表的值都让我搞了好一阵,然而并没有结束,恢复选中状态也是花了我半个小时. 这里先记一下省的以后会忘了. 获取jQuery中select下拉列表中的lang属性值: <span style="font-size:14px;"> var provinceSearch = $("#loc_province_search").find("option:selected").attr(

  • 各有各招，让“本地连接”恢复正常状态

    各有各招，让“本地连接”恢复正常状态

    无论是上Internet还是联局域网,我们都需要从"本地连接"下手,对网络参数进行合适的配置.不过在实际上网过程中,我们有时会发现"本地连接"可能发生各种莫名其妙的故障,这些故障往往导致我们无法对网络参数进行有针对性地设置,从而影响我们的上网效率.为了有效提高上网效率,我们必须掌握一些与"本地连接"相关故障的排除方法;这不,本文下面就列出了"本地连接"比较容易发生的几则故障现象,并对每一故障现象提出了不同的应对办法,相信能给大

  • jQuery select自动选中功能实现方法分析

    本文实例分析了jQuery select自动选中功能实现方法.分享给大家供大家参考,具体如下: //筛选 var typeid = "<!--{$typeid}-->"; var bigclassid = "<!--{$bigclassid}-->"; var smallclassid = "<!--{$smallclassid}-->"; $("#typeid option[value="

  • Bootstrap select实现下拉框多选效果

    在学习bootstrap实现下拉多选效果的时候,觉得该效果很好,所以拿来分享下,这里就不详细的描述了,直接附上代码给各位看看 HTML代码: <div class= "row" style ="margin-top :10px;"> <div class= "form-group col-xs-12"> <label for= "sceneModel_title" class="col-

  • 多图展示点击切换效果模拟的flash效果，点小图放大显示，再点恢复默认。

    多图展示点击切换效果模拟的flash效果,点小图放大显示,再点恢复默认. 类似于Flash制作的一个图片展示效果 html,body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#222; left:0; top:0; width:100%; height:100%;zIndex:-2;} =NX*NY*SP){ xrun=0; run=false; if(dR==-1

  • select隐藏选中值对应的id,显示其它id的简单实现方法

    由于select选项较少,做的简单, <select name="typeid" id="typeid"> <option value="-1">-请选择类型-</option> <option value="grade">兑换等级</option> <option value="money">兑换现金</option> &

  • javascript获取select标签选中的值

    复制代码 代码如下: var obj = document.getElementById("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式 复制代码 代码如下: $('#testSelect

  • pycharm恢复默认设置或者是替换pycharm的解释器实例

    Windows 找到下面的路径,然后删掉即可 # Windows Vista, 7, 8, 10:<SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION> # Windows XP:<SYSTEM DRIVE>\Documents and Settings\<USER ACCOUNT NAME>\.<PRODUCT><VERSION> 如果是更换编

  • pycharm重置设置,恢复默认设置的方法

    window 系统 找到下方目录-->删除. 再重新打开pycharm # Windows Vista, 7, 8, 10: <SYSTEM DRIVE>\Users\<USER ACCOUNT NAME>\.<PRODUCT><VERSION> 例:C:\Users\Administrator\.PyCharm2018.1 # Windows XP: <SYSTEM DRIVE>\Documents and Settings\<US

随机推荐