jquery multiselect reload

Question

How can I add or remove options in JQuery UI Multiselect ? I am initializing the multiselect on page load and I need to remove existing values and add new values based on anothe

Answer 1

var valArr = ["1", "2"],
         i = 0,
      size = valArr.length,
  $options = $('#MySelect option');

for (i; i < size; i++) {
  $options.filter('[value="' + valArr[i] + '"]').prop('selected', true);
}

$('#MySelect').multiselect('reload');

1.valArr is values of select Options
2.for loop to set selected to matched option based on valArr
3.our changes is only in hidden select element
4.to change in multiselect generated elements we need to reload
5.every pluggin may have different name to reload eg:update,refresh

Answer 2

I was trying to rebuild multiselect by .multiselect("destroy") and .multiselect(), but it wasnt working, so finally I find this solution worked for me.

$.each(jsonArray, function(i, val) {
    $('#frmarticles-f_category_id').append('<option value="'+i+'">'+val+'</option>').multiselect('rebuild');
});

Answer 3

I used it in this way :

$("#<%= cmbInBayiID.ClientID %>").multiselect().trigger('reset');

It worked.

Answer 4

    function setMultiSelect(idElement, paramVal){
        eval("$('#"+idElement+"').multiselect('uncheckAll')");
        $.each($('input[name="multiselect_'+idElement+'"]'), function(k,i) {    
            if(paramVal.indexOf(this.value)!=-1){
                this.checked = true; 
            }
        }); 
         eval("$('#"+idElement+"').multiselect('update')");
    }   

Answer 5

For that one you could just destroy and reinitialize after changing...

$("#multipleselectboxId").append(toAppend).multiselect("destroy").multiselect();

There's also another plugin with a refresh function: EricHynds's Multiselect

$("#multipleselectboxId").append(toAppend).multiselect("refresh");

Answer 6

For wenzhixin MultiSelect:

var i = jQuery('input');
i.data('multipleSelect').$parent.remove();
i.removeData('multipleSelect');
i.show();