Deselect All selected options in bootstrap select picker not working

Question

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

Possible duplicate of [How to reset value of Bootstrap-select after button click](https://stackoverflow.com/questions/41883537/how-to-reset-value-of-bootstrap-select-after-button-click) — Carsten Løvbo Andersen, Jun 13 '17 at 10:42
@CarstenLøvboAndersen I've seen that post, but i didn't solved my problem — ÛmÄîr MÄlîk, Jun 13 '17 at 10:48
you need to replicate your problem in a snippet . just by 'talking' we cannot help you. — Mihai T, Jun 13 '17 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, Jun 13 '17 at 11:38
well then you must realise that if you cannot replicate the problem it's very hard for us to help you . try adding the jquery files before all bootstrap files ( including the select file ) ; that might do it . or check other code you have that might be interfering with the code for select — Mihai T, Jun 13 '17 at 11:43

score 5 · Answer 1 · answered Aug 21 '18 at 16:16

5

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

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

answered Aug 21 '18 at 16:16

user154745

71
1
4

this method is not working – Mohamed Raza Mar 22 '22 at 21:14

score 1 · Answer 2 · edited Nov 26 '22 at 00:00

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>

score 0 · Answer 3 · answered Jun 13 '17 at 11:02

0

$(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');

answered Jun 13 '17 at 11:02

Gbemiga Ogouby

126
6

this is for simple select picker but not for bootstrap select picker. – ÛmÄîr MÄlîk Jun 13 '17 at 11:07
1

Got it. I try this with the bootstrap select picker and it's work. `$(document).on('click', '#foo', function(){ $('[data-id=searchItemTypes]').attr('title', ''); $('[data-id=searchItemTypes]>span').html(''); });` – Gbemiga Ogouby Jun 13 '17 at 11:24
This is close, but it just removed the placeholder text not the selected options, those are still selected. – ÛmÄîr MÄlîk Jun 13 '17 at 11:42
Ok. Add this code `$('#searchItemTypes>option').removeAttr('selected');` after this `$('[data-id=searchItemTypes]>span').html('');`. It will deselect selected options. – Gbemiga Ogouby Jun 14 '17 at 12:44

score -2 · Answer 4 · answered Jun 13 '17 at 10:44

-2

Try this:

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

answered Jun 13 '17 at 10:44

guest

706
7
15

2

I've mentioned this in my question, it never worked for me. – ÛmÄîr MÄlîk Jun 13 '17 at 10:49

Deselect All selected options in bootstrap select picker not working

4 Answers4