Bootstrap Selectpicker will not reset using built-in functions

ajax, html, javascript, jquery, twitter-bootstrap

Solution

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

Problem

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.

Original source