Question

我有一个页面加载了一个下拉列表，其中包含一个带有id = "accounts"的选择下拉列表。页面加载时，它已经在“帐户橙色”页面上。我想使用JQuery来查找select id元素，然后强制它单击应该是索引2的3选项。

<select id="accounts" onChange="changeAccount(this.form,this[this.selectedIndex].value)">
    <OPTION value="">Select One...</OPTION>
    <OPTION value="111">Account Red</OPTION>
    <OPTION value="222">Account Yellow</OPTION>
    <OPTION value="333">Account Blue</OPTION>
    <OPTION value="444" selected>Account Orange</OPTION>
</select>

这样的工作：

jQuery('#accounts>option:eq(2)').prop('selected', true);

目前，当页面加载时，它确实选择了正确的选项，尽管“选择”标签但它没有将其触发到OnChange功能以选择“帐户黄色”然后它将重新加载页面。这就是我希望它做的。

Answer 1

首先，最好通过值而不是索引来设置SELECT的值。因为您可能希望稍后（在源代码中或动态地）添加额外的OPTION，然后关闭您的索引计数。

其次，我发现更好的做法是更改SELECT的值，而不是更改使其被选中的HTML属性/属性（例如，不设置/更改selected的{{1}}属性1}}，但更改OPTION的值。否则，您最终可能会使用多个SELECT selected，这可能有效，但编码不是很干净。

第三，如果您正在使用OPTION，则建议的>option:eq(2)选择器可能无效，因为OPTGROUP不是OPTION的直接后代1}}。

所以，我的建议是使用： SELECT

选择正确的jQuery('#accounts').val('222').change();字段，然后将值设置为SELECT，然后触发333事件（在这种情况下您需要手动执行此操作）。

Answer 2

尝试以下方法：

jQuery('#accounts>option:eq(2)').prop('selected', true).closest('select').trigger('change');

Answer 3

$('#accounts>option:eq(2)').prop('selected', true).promise().then(function(){
     changeAccount(this.form,this[this.selectedIndex].value)
});

使用JQuery选择下拉选项并激活OnChange函数

3 个答案: