选择空选项时引导选择清除

Question

我正在像这样使用bootstrap-select：

<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选项，但我还需要清除我选择的选项。

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

知道怎么做吗？

Answer 1

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

您还需要点击选择框的更改事件以查看是否需要调用该方法。为此，只需monitor the change event on the original select element。

$('#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>