如何动态选择 jQuery ui 选择菜单中的选项？

Question

将菜单从常规选择更改为 jQuery 选择菜单后，我无法再以编程方式选择其中的选项。有没有办法做到这一点？

要选择的代码是（假设 ListId 是列表的实际 Id）

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

插件是这样激活的：

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

有没有办法在选择菜单中选择一个项目？调用相同的 .val(value) 函数只会选择隐藏的原始选择列表中的值，而不是样式精美的 jQuery 选择菜单。

Answer 1

我尝试了以下方法，在我的情况下确实有效

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

或

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

Answer 2

我尝试了以下方法，但在我的情况下不起作用

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

刷新，选择...等。在某些情况下它不起作用。

因此，我在chrome中按ctrl+I查看源代码。 我使用以下代码来解决我的情况。

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

Answer 3

假设你之前已经完成了这部分：

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

我发现这是可行的：

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

这会导致风格化的下拉菜单显示正确的值。

Answer 4

请注意，您必须使用 索引（不是值）来选择使用此方法的选项。

例如，给定这个选择。

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

在这种情况下，表达式$('#ListId').selectmenu("value", "value-two"); 不会返回任何结果。取而代之的是，我们必须使用$('#ListId').selectmenu("value", "2");。换句话说，我们必须使用 select 中元素的位置/索引。不是价值！

虽然查找索引很容易。您可以使用以下行来实现它。

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

Answer 5

您还可以通过添加更改调用来触发更改事件处理程序：

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

Answer 6

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