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

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

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 4

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.

Answer 5

well this plugin works fine but I have a pb with destroy and filter: my combo data are loaded with ajax. So, when I refresh the data with ajax call, I call destroy to refresh the plugin:

myCombo.multiselect('destroy');
myCombo.multiselect().multiselectfilter();

It works for the first call: empty combo, ajax call to load data, call the functions above. But if I refresh the combo data and call again the above functions, the filter disappeared? Someone experienced this pb before and found a solution?

Answer 6

I have also experienced the same issue but finally, I resolved. Please use $(selecter).multiselect("refresh"); instead of $(selecter).multiselect("reload");