javascript - 为什么 select.setAttribute ('value' ,value) 产生与 select.value=value 不同的结果？

Question

脚本 1 将记录 two 但浏览器仍会将 select 元素呈现为 One。该表单还将提交值 one。 脚本 2 将记录、呈现和提交 两个。我希望它们是同义词并做同样的事情。请解释它们为何不同，以及我还应该在其他什么地方寻找相同的不一致之处。

据我了解，DOM 中的 select 元素实际上并不包含 value 属性。第一个方法清楚地分配它并从该元素中检索值，对渲染没有影响。对于 select 元素，我应该如何正确使用 setAttribute 和 getAttribute？

演示文档:

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

脚本 1:

document.getElementById('el').setAttribute('value','two');
console.log(document.getElementById('el').getAttribute('value'));

脚本 2:

document.getElementById('el').value = 'two';
console.log(document.getElementById('el').value);

Answer 1

MDN 没有提及 <select> 的 value 属性，也许您指的是 <option> 的 selected 属性. value 属性将应用于其他一些与表单相关的元素，例如 <input> , <textarea>等

不过，selected 属性与其他元素的 value 属性同样适用；它不会更改当前值，而只会更改 <select> 的默认/初始值。 .你可以随时 .reset parent <form>使其应用(不过这也将重置所有其他与表单相关的元素)。例如；

<!-- HTML -->
<form id="f">
    <select id="el">
        <option value="one">One</option>
        <option value="two">Two</option>
    </select>
</form>

现在使用 JavaScript 在 <option> 上设置一个selected 属性, 然后 reset <form> ;

document.getElementById('el').options[1].setAttribute('selected','selected');
document.getElementById('f').reset(); // make it get applied by resetting form

Demo fiddle

HTMLSelectElement DOM interface确实有一个属性值，这被定义为

The value of this form control, that is, of the first selected option.

因此，将其设置为(x)会循环遍历可用选项，寻找第一个值匹配x的选项。 , 并且(如果找到)选择它作为“第一个选择的选项”，改变当前的选择。