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 another selection. I am initializing the multiselect on page load using:

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

After that, I am adding values to the multiple drop down using jQuery append() and remove() methods which are working fine with original dropdown but in the multiselect are not getting reflected.

Can anyone help with this?

Answer 1

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 2

I found the solution for this, first destroy the multiselect and reInitialize it, Thanks for @ Brandon Joyce,

solutions for this is

$("#multipleselectboxId").append(toAppend);
$("#multipleselectboxId").remove(toRemove);

$("#multipleselectboxId").multiselect('destroy');
$("#multipleselectboxId").multiselect();

Answer 3

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 4

In my case, I just wanted to replace all previous content of multiselect with new.

This worked for me:

$('#multiselect_id').html(newHtml);
$('#multiselect_id').multiselect('refresh');

Answer 5

Thank you this helped. I was using multiselect UI widget and this is what worked

jQuery("select[title='" + FieldNameTitleText + "']").append( "<option value='" + OptionValue+ "'>" + OptionText + "</option>" ).multiselect("refresh");

Answer 6

Here is what I did:; it may be more than necessary, but it worked for me.

Original "select" code that requires modification:

<select id="MySelect" name="selection">
<option value="1">One</option>
<option value="2">Two</option>
</select>

I rebuild the option list in PHP, send it to the JavaScript via JSON, and construct/store the new list in a variable. E.g.:

// this is similar to if we got it from PHP
var newList = '<option value="A">Alpha</option>
<option value="B">Beta</option>
<option value="C">Gamma</option>';

Now, to switch this around in the jQuery UI Multiselect widget:

$('#MySelect').html(''); // clear out old list
$('#MySelect').multiselect('destroy');  // tell widget to clear itself
$('#MySelect').html(newList); // add in the new list
$('#MySelect').multiselect(); // re-initialize the widget

In particular, I re-initialized it with parameters, e.g.:

$('#MySelect').multiselect({selectedList: 4, header: false});

If anybody has read this far down and is still having troubles, give this a try.