HTML

Question

我有一个Bootstrap Selectpickers数组，用于过滤数据库中的结果。我需要一种方法将所有selectpickers重置为'Nothing Selected'，这是我的代码：

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');
    });
});

正如你所看到的，我已经尝试了所有的功能来重置，但无济于事，所以显然做了一些错误的进一步逻辑。

Answer 1

我从以下代码中获得了解决方案。试一试

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

你也可以尝试这个

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

Answer 2

所以我查看了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')，当点击事件被触发时，该列表不可见，因此这些选项被过滤掉，因此未点击＆＃39; /＆＃39;取消选择＆＃ 39 ;. 我修改了我的插件版本，现在我的重置＆＃39;按钮按预期工作。新行是：

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

Answer 3

也许有些迟了，但是也许有一天会帮助某个人。对我来说解决方案是这样的：

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

我有multiselect选项，用它可以将选择的项替换为一个空数组，否则您将选择值为val（''）的选项。

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

HTML

JS

3 个答案: