Bootstrap Selectpicker will not reset using built-in functions

Question

I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:

HTML

<div class="row">
    <div class="col-md-3">
        <label>By Group</label>
        <select id="groups" name="group" class="form-control selectpicker" multiple></select>
    </div>
    <div class="col-md-3">
        etc...
    </div>
</div>

JS

ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
    //var html is a list of options in html format
    $('#groups').html(html).find('option[value=""]').remove();
    //refresh the selectpicker to make sure options are registered in the picker
    $('.selectpicker').selectpicker('refresh');
});

Try to reset all the pickers:

$('#reset_filters').click(function() {
    $('.selectpicker').selectpicker('deselectAll');
    $('.selectpicker').selectpicker('render');
    $('.selectpicker').selectpicker('refresh');
    $(this).closest('form').find('.selectpicker').each(function() {
        $(this).selectpicker('render');
    });
});

As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.

Tried your 'reset' code snippet today, and that deselected my select boxes. So this might have been fixed since you had this problem. Just a comment for someone else later. — jonas, Feb 22 '17 at 10:52
You are the real MVP. If you check silviomoreto's github (https://github.com/silviomoreto/bootstrap-select) you will see he has drastically changed the code over the past couple of years. v1.6.3 -> v1.12.2 — Edward, Feb 22 '17 at 22:00

UWU_SANDUN · Answer 1 · 2016-01-12T10:51:01.927

17

I got solution from following code.Try it

$("#listID").val('').trigger('change');

And also you can try this

$("#listID").val('').selectpicker('refresh');

edited Jan 12 '16 at 10:51

answered Jan 12 '16 at 07:42

UWU_SANDUN

1,123
13
19

score 2 · Answer 2 · answered Jun 04 '20 at 15:47

Maybe it's a little late, but maybe it'll help someone someday. For me the solution was this:

$("#listID").val([]).selectpicker('refresh');

I had the multiselect option and with this you replace your chosen items for an empty array, otherwise you'll choose the option where the value is empty val('').

score 1 · Accepted Answer · answered Nov 29 '14 at 17:23

So I looked in the selectpicker.js file, the deselectAll and selectAll functions both filter their respective options by a few arguments (see line 884):

deselectAll: function () {
  this.findLis();
  this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}

A little breakdown:

.not('.divider') //prevents the divider receiving a click event! 
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?

My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'. I amended my version of the plugin and now my 'reset' button works as expected. The new line is:

this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();

Bootstrap Selectpicker will not reset using built-in functions

HTML

JS

3 Answers3

Linked