具有"e.value"与"e.options[e.selectedIndex].value"的选定元素的值

Question

给定HTML:

<select id="mySelect">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

和javascript:

var e = document.getElementById('mySelect');

要获得select的值，我可以使用e.value和e.options[e.selectedIndex].value。

我知道e.options[e.selectedIndex].value会给我选择的值(1,2或3)，e.options[e.selectedIndex].text会给我test1, test2, test3，这取决于选择哪个。

是否可以只使用e.value ?这是旧浏览器的问题吗?
哪个更正确:e.value vs e.options[e.selectedIndex].value ?

jsFiddle

Answer 1

HTMLSelectElement接口至少从1998年文档对象模型(DOM)一级规范开始包含value属性。

然而，正如在w3c邮件列表中解释的那样，问题是HTML4.01规范是模糊的:

HTML4.01确实没有明确指定value属性

• 'Menu'是一个控件类型。(HTML4.01 17.2.1)

• "每个控件都有初始值和当前值，两者都有(HTML4.01 17.2)

• SELECT可能有一个onchange属性，它暗示了一个值。(17.6 HTML4.01)

但是没有提到这个值代表什么，也没有提到初始值或默认值可以是。

然而，检查在IE5和Mozilla, SELECT的值确实返回一个字符串，该字符串对应于当前选定的值OPTION .

(…)如果HTML4.01更明确一些，可能就不会有问题了。

在以下定义中修复了此错误。

你可以在这里看到它的定义:

• HTMLSelectElement 's value in DOM Level 1, W3C Recommendation, 1998年10月1日

  当前表单控件值。

• HTMLSelectElement 's value in DOM Level 2, W3C Recommendation, 09 January 2003

  当前表单控件的值(即当前选中的选项的值)，如果选择了多个选项，则为第一个选中的选项的值。

• HTMLSelectElement的value在HTML5, W3C候选推荐

  value IDL属性在获取时必须返回在按树顺序排列的选项列表中，第一个具有其属性的option元素选择性设置为true(如果有的话)。如果没有，那就必须有返回空字符串

所以我认为使用它是安全的

Answer 2

来自comp.lang.javascript新闻组的一些旧的(~2005)线程，以及他们的FAQ[1]，提到.value访问在Netscape Navigator 4(即2000年以前的浏览器)中是不支持的，而其他一些在当时被认为是"老"的移动和桌面浏览器

结论(由@Oriol的DOM规范摘录支持):今天使用它是完全安全的。

Answer 3

document.getElementById('submit').onclick = function() {
    var e = document.getElementById("pets");
    var text = e.options[e.selectedIndex].text;
    document.getElementById("container").innerHTML = 'The selected text is ' + text;
}