为什么select.setAttribute（'value'，value）产生的结果与select.value = value不同？ [英] Why select.setAttribute('value',value) produce different results than select.value=value?

问题描述

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

Script 1 will log two but the browser will still render the select element as One. The form will also submit the value one. Script 2 will log, render, and submit two. I expect them to be synonyms and do the same thing. Please explain why they differ and where else I should be on the lookout for the same inconsistency.

据我了解，选择元素实际上并不拥有 value 属性。第一种方法明确分配了它并从该元素中检索值，而对渲染没有影响。在 select的情况下，我应该如何正确使用 setAttribute 和 getAttribute code>元素？

As I understand it, the select element in the DOM doesn’t actually hold the value attribute. The first method clearly assigns it and retrieves the value from that element, with no effect on the rendering. How am I supposed to use setAttribute and getAttribute correctly in the case of a select element?

演示文档：

<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);

推荐答案

MDN未提及值 < select> ，也许您是说 < option> 。 value 属性将适用于其他一些与表单相关的元素，例如< input> ，< textarea>。 ，等等。

MDN makes no mention of a value attribute for <select>, perhaps you meant the selected attribute of <option>. A value attribute would apply to some other form-associated elements, such as <input>, <textarea>, etc.

不过， selected 属性和 value一样。属性；它不会更改当前值，而只会更改< select> 的默认/初始值。您始终可以 .reset 父< form> 进行应用（这也会重置所有其他形式，关联元素）。例如；

Still, the same applies to the selected attribute as with the value attribute for those other elements; it won't change the current value, but only the default/initial value of the <select>. You can always .reset the parent <form> to make it applied (this will also reset all other form-associated elements, though). For example;

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

现在使用 JavaScript 设置选定的 < option> 属性，然后 reset < form> ;

Now use JavaScript to set a selected attribute on an <option>, then reset the <form>;

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

演示小提琴

HTMLSelectElement DOM接口确实具有属性 value ，这是定义为

The HTMLSelectElement DOM interface does have a property value, and this is defined as

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

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

因此，将其设置（为 x ）会循环遍历可用选项，以查找第一个具有值的选项匹配 x ，然后（如果找到）将其选择为第一个选定选项，从而更改当前选择。

Therefore, setting it (to x) loops through the available options looking for the first option with a value matching x, and (if found) chooses that as the "first selected option", changing the current selection.

这篇关于为什么select.setAttribute（'value'，value）产生的结果与select.value = value不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！