Bootprap Selectpicker will not reset using inline functions

Question

I have an array of Bootstrap Selectpickers to filter results from a database. I need a way to reset all 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 reset all collectors:

 $('#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 tried all the reset functions, but to no avail, so I obviously did the wrong logic.

Answer 1

So, I looked at the selectpicker.js file, the deselectAll and selectAll filter their corresponding parameters with a few arguments (see line 884):

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

Small 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 .filter(':visible') , the list was not visible when the click event was fired, so these options were filtered out and therefore did not get a “clicked” / “canceled”. I changed my version of the plugin and now my reset button works as expected. New line:

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

Answer 2

I got the solution from the following code. Try

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

And also you can try this

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