所选属性未在我的选择对象中设置

Rotan075 发表于 Dev

罗坦075

我想使用jQuery更改下拉菜单的值。我使用以下代码：

<select id="id145" name="id145" class="dropdown" >
    <option selected="selected" value="0">1 - test</option>
    <option value="1">2 - test</option>
</select>

使用以下JS：

$('[name=id145] option').filter(function() { 
    return ($(this).val() == '1');
}).prop('selected', true);

我看到在下拉列表中选择了值1（2-测试），但是每当我使用检查器工具查看源代码时，我仍然看到以下内容：

<option selected="selected" value="0">1 - test</option>
<option value="1">2 - test</option>

我期望看到的，但不会发生的是：

<option value="0">1 - test</option>
<option selected="selected" value="1">2 - test</option>

有人知道为什么吗？甚至有可能吗？

此处演示

TJ人群

您已经说过，即使使用DOM检查器（例如，右键单击选择并选择“检查元素”），您仍会selected="selected"在第一个选项上看到，而不是第二个。（我可以确认；我也这样做。）

该selected属性设置的默认状态的option; 它不一定反映其当前状态。从规格：

该selected属性是布尔型属性。它代表元素的默认选择。

（我的重点）

元素的selected 属性告诉您其当前状态，而不是属性。就像元素value上的属性一样（该属性input还设置默认值，而不是当前值）。如果该select框位于form且您reset在窗体上调用，则将再次选择第一个选项，因为这是选择框的默认设置。

如果您想知道当前是否选择了某个选项，则该信息在属性级别不可用。您必须改为检查该属性：

$('[name=id145]').val('1');
$("[name=id145] option").each(function() {
  console.log("Option " + this.value + ": Selected? " + this.selected); // or $(this).prop("selected")
});

<select id="id145" name="id145" class="dropdown" >
    <option selected="selected" value="0">1 - test</option>
    <option value="1">2 - test</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。