Question

脚本1 将记录two，但浏览器仍会将select元素呈现为 One 。表单还将提交值one。 脚本2 将记录，呈现和提交two。我希望它们是同义词并做同样的事情。请解释为什么它们有所不同以及我应该注意同样的不一致。

据我了解，DOM中的select元素实际上并不包含value属性。第一种方法明确指定它并从该元素中检索值，而不会影响渲染。在setAttribute元素的情况下，我应该如何正确使用getAttribute和select？

演示文档：

<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>的值属性，也许您的意思是<option>的选定属性。值属性将应用于其他与表单相关的元素，例如<input>，<textarea>等。

但是，选择的属性同样适用于那些其他元素的值属性;它不会更改当前值，只会更改<select>的默认/初始值。您始终可以.reset使用<form>来应用它（这也会重置所有其他与表单相关的元素）。例如;

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

现在使用 JavaScript 在<option>上设置选定的属性，然后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确实有值属性，这被定义为

此表单控件的值，即第一个选定选项的值。

因此，设置它（到x）会循环显示可用选项，查找匹配x的值的第一个选项，并且（如果找到）选择为“第一个选择的选项”，更改当前选择。

Answer 2

属性和属性之间存在差异。

最初解析元素时，将从HTML代码中的值填充属性。然后将这些值复制到具有相应名称的属性。因此，该属性包含初始值，该属性包含当前值。

如果更改属性，则更改元素认为的初始值，但这不会更改当前值。

Answer 3

因为value属性定义了元素的初始值，而value 属性是实际值。

创建元素后，设置value 属性没有意义，因为它几乎没有任何内容。

为什么select.setAttribute（'value'，value）产生的结果与select.value = value不同？

3 个答案: