2

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

据我了解，selectDOM 中的元素实际上并不包含该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);
4

3 回答 3

4

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

尽管如此，这同样适用于selected属性和那些其他元素的value属性。它不会更改当前值，而只会更改<select>. 您始终可以让.reset父<form>级应用它（不过，这也会重置所有其他与表单相关的元素）。例如;

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

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

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

演示小提琴

HTMLSelectElement DOM 接口确实有一个属性值，它被定义为

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

因此，将其设置为 (to x) 循环通过可用选项寻找与值匹配的第一个选项x，并且 (如果找到) 将其选择为“第一个选择的选项”，从而更改当前选择。

于 2013-05-04T00:44:04.583 回答
3

属性和属性是有区别的。

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

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

于 2013-05-04T00:36:33.447 回答
1

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

创建元素后，设置value 属性没有任何意义，因为它几乎什么都不做。

于 2013-05-04T00:34:46.737 回答