How to add option using MultiSelect jQuery plugin

Question

I am using the jQuery - MultiSelect plugin.

I want to be able to add an option to my initial select box, and then have the MultiSelect user interface update with the new option.

Here is what I have (which doesn't work).

var value = $("#newGroup").val();
$('#Select1').append("<option value=\"" + value + "\">" + value + "</option>");

Then I've tried to call the same code to recreate the multiselect along with other options like destroying it first.

Here is the code I use to implement the plugin.

$("#Select1").multiselect({ sortable: false, searchable: true });

Here is the plugin's home page: http://quasipartikel.at/multiselect_next/

Answer 1

Do you have the latest version of MultiSelect? Version 1.8 now adds a refresh command that is designed to update lists to reflect newly appended or deleted options. Your code sequence should be:

var value = $("#newGroup").val();
$('#Select1').append("<option value=\"" + value + "\">" + value + "</option>");
$('#Select1').multiselect( 'refresh' );

Answer 2

try to use

$('.multiselect').multiselect('destroy');
$('.multiselect').multiselect();

Answer 3

For old versions you can try this

$('select').multiselect('destroy').removeData().multiselect();

'destroy' method doesn't remove data from the select node so when you try to initialize it again it thinks that it already initialized. removeData() solves the problem.

New versions has 'refresh' method so you can append some options to the select and call

$('select').multiselect('refresh');

when multiselect already initialized.