无法使用JavaScript在IE中获取选择框值

Question

我正在尝试使用JavaScript获取选择框的值.这适用于Firefox,Chrome和IE9,但不适用于IE6,7,8.如果我使用jQuery val(),它可以工作,但我正在尝试使用vanilla JavaScript获取价值.为什么这不起作用'.

$('#get').click(function() {
    var x = document.getElementById('bbb').value;//works if i do $('#bbb').val()
    alert(x)
})

查看http://jsfiddle.net/s7YAN/25/

Answer 1

查看jQuery源代码,您会注意到,通过获取所选元素.val()的值,它们可以获得<select />元素的值<option />.<option />value-getter 的代码如下:

function( elem ) {
    // attributes.value is undefined in Blackberry 4.7 but
    // uses .value. See #6932
    var val = elem.attributes.value;
    return !val || val.specified ? elem.value : elem.text;
}

所以关键是text如果value一个人不是真的,他们会得到选项元素的属性.这是关键,因为在您的示例中,<option />元素没有value 属性.所以如果你的选择是

<option value="xyz">xyz</option>
<option value="abcdx">abcdx</option>

它会奏效.它适用于其他浏览器,即使没有value属性,因为规范说该value 属性应默认为与textContent属性相同.但是IE没有实行规范的这些方面,直到9版本,不仅填补了value 财产从value 属性.

为了让您的代码像您期望的那样工作,而不更改标记,您应该像我在jsFiddle的修订版本中那样执行:

$('#get').click(function() {
    var bbbEl = document.getElementById('bbb');
    var selectedOptionEl = bbbEl.options[bbbEl.selectedIndex];
    var x = selectedOptionEl.value || selectedOptionEl.text;
    alert(x);
});

(请注意,你不应该使用textContent,如规范说,因为IE6至少是没有实现textContent在所有的,只是text,所以你可能有一个不匹配,如果依靠它们之间的区别,即认为text是"相同textContent,除了空格折叠.")