Bootstrap-select clear when chosen empty option

I'm using bootstrap-select like this:

<!-- language: lang-html -->

<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>

I can select multiple options, but I also need to clear which options I chosen.

For example, if I choose USA and Spain, when I click -clear-, I need to clear the other options and close the dropdown.

Any idea how to do this?

You can programmatically clear the selected options by calling .selectpicker('deselectAll').

You'll also need to tap into the change event for the select box to see if you need to call into the method. To do that, just monitor the change event on the original select element.

<!-- language: lang-js -->

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

Demo in Stack Snippets

<!-- begin snippet: js hide: true --> <!-- language: lang-js -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->