Reputation: 473
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
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
Reputation: 71
For posterity, you need to refresh the selector after clearing the options:
$('.selectpicker').val('default').selectpicker('deselectAll');
$('.selectpicker').selectpicker('refresh');
Upvotes: 5
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