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

Question

这是一个简单的问题，但我找不到任何参考资料，所以我来回答一下。

假设我有一个选择元素：

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

现在我想获取它所选选项的value。我经常看到这种代码片段被使用：

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

这非常有效。但是，我发现 select 元素也有一个 value 属性：

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

请查看包含两个示例的fiddle。

第二种方法不仅更简单，而且可以在IE6上完美运行（没错，我实际测试过，这是兼容IE6的版本）。

第一种方法为什么被广泛接受？第二种方法是否存在不兼容或边角案例问题？

ps. 我的“最常用的方法”论点主要基于个人经验，但至于参考资料，获取下拉列表中所选值的JavaScript方法？中得票最高的两个答案都使用了第一种方法。

- Fabrício Matté

---

相关MDN页面：https://developer.mozilla.org/zh-CN/docs/DOM/HTMLSelectElement - Paul S.

@FabrícioMatté，当你忽略角落情况时，要求解决角落情况的问题并不是一个好主意。 - zzzzBov

@zzzzBov 好的，我的错，那我们考虑多个值。 - Fabrício Matté

@PaulS。我正在查看HTMLInputElement，但未能找到HTMLSelectElement。那就是我一直在寻找的东西。 - Fabrício Matté

@VisioN 什么没有理由？我的论点是 selectedIndex 更常用？从我现在阅读的参考资料来看，两者是等价的。 - Fabrício Matté

Answer 1

这个MDN页面告诉我们：

options nsIDOMHTMLOptionsCollection 这个元素包含的所有选项元素。只读。

selectedIndex long 第一个选中选项的索引。

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

然而，它还说：

selectedOptions 未实现 (参见bug 596681) HTMLCollection 所有被选元素的集合。HTML5标准。

因此，如果您需要一个多选框来保持通用性，您需要循环遍历 options，但如果您只需要单选框，则 sel.options [sel.selectedIndex] .value 和 sel.value 是等价的，但前者更类似于为多选框循环的形式。

- Paul S.

---

谢谢，看到MDN中select的value属性的定义让我松了一口气，因为它是一个标准属性，而不是HTML5中引入的那些属性之一。我猜我直到不久前才意识到它的存在。 - Fabrício Matté

Answer 2

第一个选项被广泛接受，只因为它更为人所知。第二个选项完全可行。

你已经验证它在Navigator 4上工作了吗？

- Kernel James

---

很不幸，我只支持旧版IE，因为在世界某些地区它仍然被广泛使用。对于IE以外的其他主流浏览器，我只测试最新版本。即使与IE6相比，Firefox 2的使用率也应该接近于零。 - Fabrício Matté