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

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')，触发点击事件时列表不可见，因此这些选项被过滤掉，因此没有被“点击”/“取消选择”。我修改了插件的版本，现在我的“重置”按钮按预期工作。新行是：

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