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!

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. — isherwood, Sep 23 '14 at 19:56
Hmmm... That shoulda done it. Maybe create a demo. http://jsfiddle.net — isherwood, Sep 23 '14 at 20:01

score 9 · Accepted Answer · answered Nov 13 '14 at 15:33

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');
    });
});

I didn't know that about the form reset - thank you! – jenni-mm2 Nov 14 '14 at 16:07 — jenni-mm2, Nov 14 '14 at 16:07

score 8 · Answer 2 · answered Dec 22 '14 at 09:42

8

today i faced same issue...i did

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

It worked for me...

answered Dec 22 '14 at 09:42

Bhupendra Pandey

348
3
16

score 2 · Answer 3 · answered Sep 30 '14 at 16:15

2

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)
})

answered Sep 30 '14 at 16:15

jenni-mm2

185
1
2
11

Based on your answer I did this, and it seems to work: `$('option:selected', theMultiselect$).each(function() { theMultiselect$.multiselect('deselect', $(this).val()); });` – Mikael Oct 01 '14 at 23:46
I tried that in the JSFiddle above and it doesn't seem to work. – jenni-mm2 Oct 03 '14 at 13:20

score 0 · Answer 4 · edited Apr 09 '15 at 14:09

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.

Can you format your code properly? It's unreadable at the moment. — Juan Carlos Farah, Apr 09 '15 at 14:08

score 0 · Answer 5 · answered Jan 13 '16 at 16:50

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');
});

score 0 · Answer 6 · edited Jun 01 '16 at 12:01

0

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

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

edited Jun 01 '16 at 12:01

Marc Dix

1,864
15
29

answered Jun 01 '16 at 10:53

Arun

1

score 0 · Answer 7 · answered Jun 28 '17 at 13:52

0

None of above but following worked for me.

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

answered Jun 28 '17 at 13:52

Pooja Mistry

6,835
1
13
8

score -1 · Answer 8 · edited Feb 13 '17 at 08:41

-1

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', '');
});

edited Feb 13 '17 at 08:41

FelixSFD

6,052
10
43
117

answered Feb 13 '17 at 08:21

Soumen Kumar Saha

29
1

Bootstrap-Multiselect issue with form reset and checkboxes repopulating

8 Answers8