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

<link href=".12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<script src=".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>

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

<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

I'm using bootstrap select picker plugin Silvio

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

When multiple options are selected in select picker I want to deselect all of them when user click clear button. I tried multiple code sample but none of them worked.

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

And following is what I tried for deselecting them.

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

Anyone have idea about it why it's not working, I'm stuck here. Thanks!

Update

The question marked here as a duplicate didn't solved my issue. I guess I've went through all the questions posted here related to my question but nothing worked for me.

Here is the screenshot of select picker as most people are answering solution for simple select picker. It's different for that:

http://prntscr./fj7ibl

• javascript
• jquery
• twitter-bootstrap

• Possible duplicate of How to reset value of Bootstrap-select after button click – Carsten Løvbo Andersen Commented Jun 13, 2017 at 10:42
• @CarstenLøvboAndersen I've seen that post, but i didn't solved my problem – ÛmÄîr MÄlîk Commented Jun 13, 2017 at 10:48
• you need to replicate your problem in a snippet . just by 'talking' we cannot help you. – Mihai T Commented Jun 13, 2017 at 11:19
• @MihaiT added code snippet, strange but it's working here.... but not in code and when i try using firebug. – ÛmÄîr MÄlîk Commented Jun 13, 2017 at 11:38
• are you getting any errors in the developer console ? – Mihai T Commented Jun 13, 2017 at 11:39

4 Answers 4

For posterity, you need to refresh the selector after clearing the options:

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

Put your <select> element inside a <form> and try this:

function clearSearchForms() {
  $("#searchItemTypes").val('default').selectpicker("refresh");
  $("#searchItemNew").val('default').selectpicker("refresh");
}

<link href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

<form id="items">
  <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>
</form>

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

<script src="https://ajax.googleapis./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>

This will help you. I just remove attribute selected on the button click event. This is the more important part : $('#searchItemTypes>option').removeAttr('selected');

Try this:

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