無法獲得使用JavaScript的IE中的選擇框值

我想要使用JavaScript獲取選擇框的值。這適用於Firefox，Chrome和IE9，但不適用於IE6,7,8。它工作，如果我使用jQuery的val()，但我想要使用香草JavaScript的價值。爲什麼這不起作用？「。無法獲得使用JavaScript的IE中的選擇框值

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

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

來源

2011-05-06 Pinkie

jQuery存在的原因是爲了消除這些類型的跨瀏覽器不兼容如果你想支持IE6，我建議使用它 – Domenic 2011-05-06 01:40:28

@Domenic我明白這個問題的目的是學習如何在IE中使用普通的JavaScript來完成這項工作。 – Pinkie 2011-05-06 01:47:40

Looking at the jQuery source code，您注意到.val()，他們得到的<select />元素的值通過獲取所選元素的值。爲<option />值的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一個不truthy。這很關鍵，因爲在您的示例中，<option />元素沒有value屬性。所以如果你的選擇是

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

它會工作。它適用於其他瀏覽器，即使沒有value屬性，也可以使用，因爲the spec says that the valueproperty 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相同，但空間已摺疊，則可能會出現不匹配。「）

來源

2011-05-06 01:49:42 Domenic

這很有道理。謝謝。 – Pinkie 2011-05-06 02:02:31

它在IE中失敗的原因是IE不遵循[W3C HTML 4.01規範]（http://www.w3.org/TR/html401/interact/forms.html#adef- value-OPTION）。如果選項沒有值屬性，則其值是選項的內容。 – RobG 2011-05-06 02:31:36

嘗試以下（假設下面的代碼你把的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]

來源

2011-05-06 01:25:29 Tod

這是如何適用於我的jsfiddle。 – Pinkie 2011-05-06 01:31:37

嘗試：

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

來源

2011-05-06 01:25:34 Kon

這不起作用http://jsfiddle.net/s7YAN/26/我在IE6中測試 – Pinkie 2011-05-06 01:28:21

無法獲得使用JavaScript的IE中的選擇框值

回答

相關問題