Bootstrap-Multiselect issue with reset form and checkboxes repopulating

Question

I am using bootstrap-multiselect for the dropdown in my application. Everything works just fine, with the exception of my reset form, when I want it to go back to the originally selected values. It displays the selected values ​​as expected in the menu when it is closed (i.e. creates a list with several selections), but when I open the menu, the checkboxes for the selected items are not checked.

I tried the following to no avail:

$("#MyMenu").multiselect('refresh'); $("#MyMenu").multiselect('rebuild'); $("#MyMenu").multiselect('destroy'); 

followed by

 $("#MyMenu").multiselect(); 

Any help is appreciated!

Answer 1

For me it is simple:

 $('#id').multiselect('refresh'); 

However, it should be noted that the reset event fires before the form inputs are truly reset. In practice, this means that the following will not work:

 $('#formID').on('reset', function(){ $('#id').multiselect('refresh'); }); 

while ending a call inside an instant setTimeout will work!

 $('#formID').on('reset', function(){ setTimeout(function(){ $('#id').multiselect('refresh'); }); }); 

Answer 2

Today I faced the same problem ... I did

 $("option:selected").removeAttr("selected"); $("#MyMenu").multiselect('refresh'); 

It worked for me ...

Answer 3

After much trial and error, I finally resolved it this way.

 $('#MyMenu').multiselect('destroy'); $('#MyMenu').multiselect(); $('#MyMenu option:selected').each(function () { $(":checkbox[value=" + $(this).val() + "]").attr('checked', true) }) 

Answer 4

str - an array from the database

 $('#dropdown').multiselect({includeSelectAllOption: true,}); $("#dropdown").multiselect('deselectAll', false); 

initialize and reset first perform decimation.

 for(i=0; i<= str.length; i++){ $("#dropdown").find("option[value='"+ $.trim(str[i])+"']").prop("selected", true); $("#dropdown").find("option[value='"+ $.trim(str[i])+"']").attr("selected", "selected"); } $("#dropdown").multiselect("refresh"); 

this code will pre-select the values.

Also, if you want to reset, the dropdown menu below is the code

 $('#dropdown').multiselect({includeSelectAllOption: true,}); $("#dropdown").multiselect('deselectAll', false); $("#dropdown").multiselect("refresh"); 

Do not forget to update. This code is checked and verified. works for me.

Answer 5

To reset the multi selector to its original state when loading the page, try:

 // Initialize Multiselect var msDropdownInitialSelected; $(document).ready(function () { $('#msDropdown').multiselect(); $('#msDropdown').multiselect('select', valuesArray); msDropdownInitialSelected = $('#msDropdown').val(); }); // Reset Multiselect $('msDropdown').on('reset', function(){ $('#msDropdown').multiselect('select', msDropdownInitialSelected); $('#msDropdown').multiselect('refresh'); }); 

Answer 6

Resetting multiselect worked for me, executing the below code in sequence.

 $('#ID').multiselect('deselectAll', false); $('#ID').multiselect('select', []); 

Answer 7

None of the above, except the following, worked for me.

 $('#ID').multiselect('deselectAll', false); $('#ID').multiselect('updateButtonText'); 

Answer 8

This is the code that worked for me, everyone else could not work.

 $('#basicForm').on('reset', function(){ // clearing the categories $('#project_category').select2('val', null); $('#project_category').attr('value', ''); });