Change Selection in Multi-Select via function in jQuery Plugin

Question

I am using using a jQuery plugin to achieve a Multi-Select selection Plugin Github Demo. Now I would like to artificially change the selection of the drop-down menu from another function. So what I have is this:

HTML part:

<select id="Fruits" name="Fruits" multiple="" style="display: none;">
    <option value="1">Number1</option>
    <option value="2">Number2</option>
    <option value="3">Number3</option>
</select>

Then I use that code to initialise the menu:

$(function(){
   $('#Fruits').multiSelect({'noneText':'Select Fruits'});
});

The result is:

Now I would like to select a certain option by running another function:

As I am not really familiar with jQuery I have a hard time understanding the sourcecode of the Plugin. So far I have tried things like this:

$("#Fruits").data("plugin_multiSelect").updateButtonContents()

or

$("#Fruits").data("plugin_multiSelect").$element.on('change.multiselect')

It seems I am a bit lost.

.$element.on('change.multiselect') is the event triggered when stuff is selected — mplungjan
@mplungjan Thank you! That's why I tried it. It simply calls _this.updateButtonContents(). I think I need to somehow get the option box that I want to select into the "_this"? — Matthias La
I just see that updateButtonContents() is looking for "selected" if $(this).is(':selected')) {selected.push( $.trim(text) );} How can I mark an entry as selected? — Matthias La
I would choose a different plugin or ask the author github.com/mysociety/jquery-multi-select/issues - there is not even an example in the demo code — mplungjan

Matthias La Matthias La · Accepted Answer · 2021-08-05T13:49:04

I just figured out the syntax to change the selection state of the multi-select. It would be:

$('#Fruits').val(["0","4"]);
$("#Fruits").data("plugin_multiSelect").updateMenuItems();

So that would get the 1st and 5th element of the drop-down "Fruits" selected.

Change Selection in Multi-Select via function in jQuery Plugin

1 Answers