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

Looking at the jQuery source code，您注意到对于.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属性，因为the spec says that the value property should default to the same as the textContent property。但IE在版本9之前没有实现规范的这一方面，只填充了value 属性中的value 属性。

为了使您的代码按预期工作，而不更改标记，您应该像my revised version of your 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相同，除了空格已折叠。”

Answer 2

尝试以下方法，（假设下面的代码将getElementById的结果放入sel_node）

var select_data ={index:0, value:""}; 
select_data.index = sel_node.selectedIndex;
select_data.value = sel_node.options[select_data.index].value;

我刚从我编写的一些旧代码中取出这个代码，当时我必须在FF或IE6中工作。我认为这种有点复杂的方法是在IE6中工作的。您可以简化这一点，在我的代码中我想返回select_data对象。我想而不是重写它，我只是剪切并粘贴已知的工作版本。

（在此处移动评论以获得更好的格式化）

var select_node = document.getElementById('bbb');
var the_value = select_node.options[select_node.selectedIndex].value;

现在the_value有你想要的。我的答案与其他答案相同（当我发布时不存在，或者我不会打扰）。我可以告诉你的是我发布的代码是我使用的代码，它适用于IE6。如果这不起作用，请使用调试器，让我们知道您对选项的看法[select_node.selectedindex]

Answer 3

尝试：

var list = document.getElementById('bbb');
var x = list.options[list.selectedIndex].value;

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

3 个答案: