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

Answer 1

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 2

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 3

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

Answer 4

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 5

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