Question

＆＃13;

function clearSearchForms() {
        $('#searchItemTypes').selectpicker('val', '');
        $('#searchItemTypes').selectpicker('deselectAll');
        $('#searchItemNew').selectpicker('val', '');
        $('#searchItemNew').selectpicker('deselectAll');
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script>
$('.selectpicker').selectpicker();
</script>
<select name="searchItemTypes[]" multiple="" id="searchItemTypes" class="selectpicker">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>

<select name="searchItemNew[]" multiple="" id="searchItemNew" class="selectpicker">
<option value="one">One1</option>
<option value="two">Two2</option>
<option value="three">Three3</option>
</select>
<button type='button' onclick="clearSearchForms()">Clear All</button>

＆＃13;

我正在使用bootstrap select picker插件Silvio

http://silviomoreto.github.io/bootstrap-select/

如果在选择选择器中选择了多个选项，我想在用户单击清除按钮时取消选择所有选项。我尝试了多个代码示例，但没有一个工作。

<select name="itemTypes[]" multiple="" id="searchItemTypes" class="selectpicker">
<option value="biscuit">Biscuit</option>
<option value="ketchup">Ketchup</option>
<option value="toffee">Toffee</option>
</select>

以下是我试图取消选择它们。

$("#searchItemTypes").val('default');
$("#searchItemTypes").selectpicker("refresh");
$('#searchItemTypes').selectpicker('val', '');
$('#searchItemTypes').selectpicker('deselectAll');

任何人都知道为什么它不起作用，我被困在这里。谢谢！

更新

此处标记为重复的问题并未解决我的问题。我想我已经完成了与我的问题相关的所有问题，但没有任何对我有用。

以下是选择选择器的屏幕截图，因为大多数人都在回答简单选择选择器的解决方案。它的不同之处在于：

http://prntscr.com/fj7ibl

Answer 1

对于后代，您需要在清除选项后刷新选择器：

$('.selectpicker').val('default').selectpicker('deselectAll');
$('.selectpicker').selectpicker('refresh');

Answer 2

试试这个：

$("#searchItemTypes").selectpicker('deselectAll')

Answer 3

$(document).on('click', '#foo', function(){
    $('#searchItemTypes>option').removeAttr('selected');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="itemTypes[]" multiple id="searchItemTypes" class="selectpicker">
<option value="biscuit" selected>Biscuit</option>
<option value="ketchup" selected>Ketchup</option>
<option value="toffee">Toffee</option>
</select>

<button id="foo" type="button">Click me</button>

这会对你有所帮助。我只是删除按钮点击事件中的选中属性。这是更重要的部分：$('#searchItemTypes>option').removeAttr('selected');

取消选择引导选择选择器中的所有选定选项不起作用

3 个答案: