选择元素是否具有标准值属性？答案

【问题标题】：Do select elements have a standard value property?选择元素是否具有标准值属性？
【发布时间】：2013-03-27 14:24:04
【问题描述】：

这是一个简单的问题，但我找不到任何参考，所以就在这里。

假设我有一个选择元素：

<select id="sel">
    <option value="1">1</option>
    <option value="2">2</option>
</select>

现在我想获取其选定选项的value。我经常看到这种 sn-p 被使用：

var sel = document.getElementById('sel');
console.log( sel.options[sel.selectedIndex].value ); //1

效果很好。但是，我发现select 元素也有一个 value 属性：

console.log( sel.value ); //1

请参阅fiddle 的两个示例。

第二种形式不仅简单得多，而且可以一直使用到 IE6（是的，我确实对此进行了测试，这里是 IE6 friendly version）。

第一种方法被广泛接受有什么原因吗？第二种方法是否存在一些不兼容或极端情况问题？

ps。我的“最常用方法”论文主要基于个人经验，但作为参考，Get selected value in dropdown list using JavaScript? 中最受好评的两个答案使用了第一种方法。

【问题讨论】：

【解决方案1】：

MDN page 告诉我们

options nsIDOMHTMLOptionsCollection 该元素包含的元素集。只读。

selectedIndex long第一个被选中元素的索引。

value DOMString 这个表单控件的值，也就是第一个选择的选项的值。

但它也说

selectedOptions 未实现（参见错误 596681） HTMLCollection 已选择的选项集。 HTML5

因此，如果你想要一个多选但通用的兼容性，你将不得不循环 options，但如果你有一个单选，sel.options[sel.selectedIndex].value 和 sel.value 是等价的，但是先验与多选循环的形式“更相似”。

【讨论】：

谢谢，在 MDN 中看到 select 的 value 属性的定义让我松了一口气，因为它是标准属性，而不是 HTML5 中引入的属性之一。我猜我直到不久前才意识到这一点。

【解决方案2】：

第一个选项被广泛接受只是因为它更广为人知。第二个选项非常好。

您是否确认它可以在 Navigator 4 上运行？

【讨论】：

我只支持旧版 IE，因为它在世界某些地方被广泛使用，很遗憾。对于IE以外的其他主流浏览器，我只测试最新版本。即使与 IE6 的使用率相比，Firefox 2 的使用率也应该几乎为零。