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.

Answer 1

I got solution from following code.Try it

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

And also you can try this

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

Answer 2

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('').

Answer 3

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