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

After changing a menu from a regular select to a jQuery selectmenu, I can no longer select options in it programatica开发者_开发技巧lly. 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.

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

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.

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

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

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

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