Bootstrap Selectpicker 不會使用內置函數重置

Question

我有一組 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');
    });
});

正如你所看到的，我已經嘗試了所有的功能來重置但無濟於事，所以顯然我在邏輯上做錯了一些。

Answer 1

我從以下代碼中得到了解決方案。試試看

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

你也可以試試這個

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

Answer 2

也許有點晚了，但也許有一天它會幫助某人。 對我來說，解決方案是這樣的：

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

我有多選選項，你用這個替換你選擇的項目為空數組，否則你將選擇值為空 val('') 的選項。

Answer 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();