Bootstrap Selectpicker 不会使用内置函数重置

Posted 2023-03-05

【中文标题】Bootstrap Selectpicker 不会使用内置函数重置

【英文标题】：Bootstrap Selectpicker will not reset using built-in functions

【发布时间】：2015-01-28 01:01:08

【问题描述】：

我有一组 Bootstrap Selectpickers 用于过滤来自数据库的结果。我需要一种将所有选择器重置为“未选择”的方法，这是我的代码：

html

<div class="row">
    <div class="col-md-3">
        <label>By Group</label>
        <select id="groups" name="group" class="form-control selectpicker" multiple></select>
    </div>
    <div class="col-md-3">
        etc...
    </div>
</div>

JS

ajax_fetch('build_group_options', groupno:groupno).done(function(html) 
    //var html is a list of options in html format
    $('#groups').html(html).find('option[value=""]').remove();
    //refresh the selectpicker to make sure options are registered in the picker
    $('.selectpicker').selectpicker('refresh');
);

尝试重置所有选择器：

$('#reset_filters').click(function() 
    $('.selectpicker').selectpicker('deselectAll');
    $('.selectpicker').selectpicker('render');
    $('.selectpicker').selectpicker('refresh');
    $(this).closest('form').find('.selectpicker').each(function() 
        $(this).selectpicker('render');
    );
);

如您所见，我已尝试重置所有功能，但无济于事，因此显然在逻辑上做错了。

【问题讨论】：

今天尝试了您的“重置”代码 sn-p，这取消了我的选择框。因此，自从您遇到此问题以来，这可能已得到解决。只是以后给别人的评论。

你是真正的 MVP。如果你查看 silviomoreto 的 github (github.com/silviomoreto/bootstrap-select)，你会发现他在过去几年里彻底改变了代码。 v1.6.3 -> v1.12.2

【参考方案1】：

也许有点晚了，但也许有一天它会对某人有所帮助。对我来说，解决方案是这样的：

$("#listID").val([]).selectpicker('refresh');

我有多重选择选项，用它你可以将你选择的项目替换为一个空数组，否则你会选择值为空 val('') 的选项。

【参考方案2】：

我从下面的代码中得到了解决方案。试试吧

$("#listID").val('').trigger('change');

你也可以试试这个

$("#listID").val('').selectpicker('refresh');

【参考方案3】：

所以我查看了 selectpicker.js 文件，deselectAll 和 selectAll 函数都通过几个参数过滤了它们各自的选项（参见第 884 行）：

deselectAll: function () 
  this.findLis();
  this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();

小故障：

.not('.divider') //prevents the divider receiving a click event! 
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?

我的问题是.filter(':visible')，触发点击事件时列表不可见，因此这些选项被过滤掉，因此没有被“点击”/“取消选择”。 我修改了我的插件版本，现在我的“重置”按钮按预期工作。新行是：

this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();