Question

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

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

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

插件被激活如下：

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

有没有办法在选择菜单中选择一个项目？调用相同的.val（value）函数只选择隐藏原始选择列表中的值，而不是选择风格很好的jQuery selectmenu。

Answer 1

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

Answer 2

假设您之前已经完成过此部分：

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

我发现这有效：

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

这会使程式化的下拉列表显示正确的值。

Answer 3

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

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

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

我尝试过以下操作，但在我的情况下它不起作用

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 6

我尝试了以下方法，它确实适用于我的情况

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

或

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

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

6 个答案: