twitter-bootstrap Bootstrap Selectpicker 不会使用内置函数重置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27204404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Selectpicker will not reset using built-in functions
提问by Edward
I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:
我有一组 Bootstrap Selectpickers 用于过滤数据库中的结果。我需要一种将所有选择器重置为“未选择”的方法，这是我的代码：
HTML
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
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');
});
Try to reset all the pickers:
尝试重置所有选择器：
$('#reset_filters').click(function() {
$('.selectpicker').selectpicker('deselectAll');
$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
$(this).closest('form').find('.selectpicker').each(function() {
$(this).selectpicker('render');
});
});
As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.
正如你所看到的，我已经尝试了所有的功能来重置但无济于事，所以显然我在逻辑上做错了一些。
采纳答案by Edward
So I looked in the selectpicker.js file, the deselectAlland selectAllfunctions both filter their respective options by a few arguments (see line 884):
所以我查看了 selectpicker.js 文件，deselectAll和selectAll函数都通过几个参数过滤了各自的选项（见第 884 行）：
deselectAll: function () {
this.findLis();
this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}
A little breakdown:
一点分解：
.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!?
My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'.
I amended my version of the plugin and now my 'reset' button works as expected. The new line is:
我的问题是.filter(':visible')，触发点击事件时列表不可见，因此这些选项被过滤掉，因此没有被“点击”/“取消选择”。我修改了我的插件版本，现在我的“重置”按钮按预期工作。新行是：
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();
回答by UWU_SANDUN
I got solution from following code.Try it
我从以下代码中得到了解决方案。试试看
$("#listID").val('').trigger('change');
And also you can try this
你也可以试试这个
$("#listID").val('').selectpicker('refresh');
