CODEWITHSUNDEEP
jquerybootstrap-multiselect
jenni-mm2
jenni-mm2

Reputation: 305

Bootstrap-Multiselect issue with form reset and checkboxes repopulating

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!

Upvotes: 6

Views: 15951

Answers (8)

Pooja Mistry
Pooja Mistry

Reputation: 7055

None of above but following worked for me. 

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

Upvotes: 0

Soumen Kumar Saha
Soumen Kumar Saha

Reputation: 29

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

Upvotes: -1

Arun
Arun

Reputation: 1

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

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

Upvotes: 0

OneManBand
OneManBand

Reputation: 558

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

Upvotes: 0

Dino
Dino

Reputation: 1

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.

Upvotes: 0

Bhupendra Pandey
Bhupendra Pandey

Reputation: 358

today i faced same issue...i did

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

It worked for me...

Upvotes: 8

Dre
Dre

Reputation: 2191

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

Upvotes: 9

jenni-mm2
jenni-mm2

Reputation: 305

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

Upvotes: 2

Related Questions