Bootstrap-Multiselect issue with form reset and checkboxes repopulating

Question

I'm using bootstrap-multiselect for a dropdown in my application. Everything works fine except for my form reset, when I want it to revert back to the originally selected values. It's displaying the selected values as expected in the menu when it's closed (i.e. creating a list with multiple selections), but when I open the menu the checkboxes for the selected items aren't checked.

I've tried the following to no avail:

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

followed by

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

Any help is appreciated!

Bugs

Is that the exact syntax you used? Please don't leave us to assume what else was in your code. I'm guessing you actually tried $("#MyMenu").multiselect('refresh');, for example. – Irritation

Sorry, I updated the code to be more accurate. – Bugs

Hmmm... That shoulda done it. Maybe create a demo. jsfiddle.net – Irritation

Here it is: JSFiddle – Bugs

Answer 1

For me it works simply with:

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

However, it must be noted that the reset event fires before the form inputs are actually reset. Practically speaking, this means that the following won't work:

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

while wrapping the call inside of an instantaneous setTimeout will work!

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

Lallans

Answer 2

today i faced same issue...i did

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

It worked for me...

Carmel

Answer 3

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

$('#MyMenu').multiselect('destroy');
$('#MyMenu').multiselect();

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

Bugs

Based on your answer I did this, and it seems to work: $('option:selected', theMultiselect$).each(function() { theMultiselect$.multiselect('deselect', $(this).val()); }); – Plank

I tried that in the JSFiddle above and it doesn't seem to work. – Bugs

Answer 4

str is array from database

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

initialize and reset the doropdown first.

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 preselect the values.

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

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

$("#dropdown").multiselect("refresh");

Do not forget to refresh. this code is tried and tested. works for me.

Predate

Can you format your code properly? It's unreadable at the moment. – Kalmia

Answer 5

To reset the multiselect to its original state at page load, 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');
});

Cargile

Answer 6

Resetting multiselect worked for me by executing below code in sequence.

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

Oubre

Answer 7

None of above but following worked for me.

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

Nephro

Answer 8

This is the code that worked for me, all others could not work.

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

Deerstalker