0

我正在使用这样的引导选择：

<select name="country_key" class="show-menu-arrow" multiple
        data-container="body" data-width="250px" >
    <option value="">-clear-</option>
    <option value="1">USA</option>
    <option value="2">Russia</option>
    <option value="3">China</option>
    <option value="4">Spain</option>
</select>

我可以选择multiple选项，但我还需要清除我选择的选项。

例如，如果我选择USAand Spain，当我单击 时-clear-，我需要清除其他选项并关闭下拉菜单。

知道怎么做吗？

4

1 回答 1

1

您可以通过调用以编程方式清除选定的选项.selectpicker('deselectAll')。

您还需要点击选择框的更改事件以查看是否需要调用该方法。为此，只需监视change原始选择元素上的事件。

$('#country_key').on('change', function(){
  if (this[0].selected) {
    $(this).selectpicker('deselectAll');
  }
});

堆栈片段中的演示

$('#country_key').on('change', function(){
  if (this[0].selected) {
    $(this).selectpicker('deselectAll');
  }
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select id="country_key" data-container="body" 
        class="selectpicker show-menu-arrow" data-width="250px" multiple>
    <option value="" >-clear-</option>
    <option value="1">USA</option>
    <option value="2">Russia</option>
    <option value="3">China</option>
    <option value="4">Spane</option>
</select>

于 2015-01-21T17:16:36.537 回答