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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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