How to select an option in a jQuery ui selectmenu dynamically?

Question

After changing a menu from a regular select to a jQuery selectmenu, I can no longer select options in it programatically. Is there a way to do this?

The code to select is (assuming ListId is the actual Id of the list)

$('#ListId').val(value);

The plugin is activited like this:

$("#ListId").selectmenu({ style: "dropdown", width:140 });

Is there a way to select an item in the select menu? Calling the same .val(value) function just selects the value in the hidden original select list, not the nicely styled jQuery selectmenu.

This answer worked for me http://stackoverflow.com/a/26501171/119741 — Nick, Feb 10 '15 at 22:58

score 23 · Accepted Answer · edited Dec 14 '10 at 22:36

23

$('#ListId').selectmenu("value", value);

edited Dec 14 '10 at 22:36

Lee

13,462
1
32
45

answered Dec 14 '10 at 22:33

Brandon Joyce

3,100
24
25

4

http://stackoverflow.com/questions/14970729/uncaught-error-no-such-method-value-for-selectmenu-widget-instance – dtrunk Jan 21 '14 at 07:53
35

Not working for the new versions of jQuery UI, try this instead $('#listId').val(value).selectmenu('refresh') – Theodore K. Apr 02 '15 at 13:56
@TheodoreK. using `$('#listId').val(value).selectmenu('refresh')` throws `Uncaught Error: no such method 'instance' for menu widget instance`. Any solution to this? I have initialized my list as `$("#listId").selectmenu();` and the options are getting dynamically populated using for loop – Del Monte Dec 28 '17 at 08:42

score 20 · Answer 2 · answered Feb 26 '15 at 18:35

Assuming that you have already done this part once before:

$("#ListId").selectmenu({ style: "dropdown", width:140 });

I found this works:

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

This causes the the stylized drop down to show the correct value.

score 2 · Answer 3 · answered Mar 07 '12 at 14:07

2

You could additionally trigger the change event handler by adding a change call:

$('#ListId').selectmenu("value", value);
$('#ListId').selectmenu("change"); // Add this for a change event to occur

answered Mar 07 '12 at 14:07

Jojje

763
1
8
10

You can have side effects by forcing a change call when you only need to reset your menu. – Helmut Granda Oct 25 '16 at 15:22

score 1 · Answer 4 · answered Oct 23 '14 at 06:46

Please note you must use indexes (not values) to select the option using this method.

For instance, given this select.

<select id="ListId">
   <option value="value-one">One</option>
   <option value="value-two">Two</option>
</select>

In this case the expression $('#ListId').selectmenu("value", "value-two"); wouldn't return any result. Instead of that, we have to use $('#ListId').selectmenu("value", "2");. In other words, we have to use the position/index of the element inside the select. Not the value!

Finding the index is easy though. You can use the following line to achieve it.

var index = $('#ListID option[value="value-two"]').index();
$('#ListId').selectmenu("value", index);

This isn't working for me... Upon looking further I found `$('#select').prop("selectedIndex",0).selectmenu('refresh');` at http://underprise.com/quick-tip-setting-the-index-of-a-select-field-with-jquery/ — sbru, Aug 11 '15 at 18:49

score 0 · Answer 5 · edited Nov 05 '15 at 08:25

I have tried the following, and it does not work in my situation

1.

$('#ListId').val(value);
$('#ListId').selectmenu("refresh");

2.

$('#ListId').selectmenu("value", value);

3.

var option = $("#ListID option")
option.attr("selected", true);
// option.prop("selected", true);
// option.attr("selected", "selected");
// option.prop("selected", "selected");
$('#ListId').selectmenu("refresh");

refresh, selected ....etc. and in some situation it does not work.

Therefore, I press ctrl+I in chrome to see the source code. and I use the following code to solve my situation.

// Set Component Separator   jQuery UI SelectMenu
componentSeparatorPlaceHolder.find(".ui-selectmenu-text").html(inputComponentSeparatorStr); 
// Set ComponentSeparatorDropDown
componentSeparator.val(inputComponentSeparatorStr);

score 0 · Answer 6 · edited Nov 05 '15 at 08:27

0

I have tried the following ways, and it does work in my situation

$('#ListId').find('option[value=""]').attr("selected", true);

OR

$('#ListId').prop('selectedIndex', 0);

edited Nov 05 '15 at 08:27

jezrael

822,522
95
1,334
1,252

answered Oct 19 '15 at 06:03

Nimesh

3,342
1
28
35

How to select an option in a jQuery ui selectmenu dynamically?

6 Answers6

Linked