CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
ÛmÄîr MÄlîk
ÛmÄîr MÄlîk

Reputation: 473

Deselect All selected options in bootstrap select picker not working

function clearSearchForms() {
        $('#searchItemTypes').selectpicker('val', '');
        $('#searchItemTypes').selectpicker('deselectAll');
        $('#searchItemNew').selectpicker('val', '');
        $('#searchItemNew').selectpicker('deselectAll');
}
<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>

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.com/fj7ibl

Upvotes: 2

Views: 8958

Answers (4)

arun s r
arun s r

Reputation: 57

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

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

Upvotes: 1

user154745
user154745

Reputation: 71

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

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

Upvotes: 5

Gbemiga Ogouby
Gbemiga Ogouby

Reputation: 126

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

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

Upvotes: 0

guest
guest

Reputation: 704

Try this:

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

Upvotes: -3

Related Questions