JavaScriptでIEで選択ボックスの値を取得できません

Question

JavaScriptを使用して選択ボックスの値を取得しようとしています。 Firefox、Chrome、IE9では動作しますが、IE6,7,8では動作しません。 jQueryのval()を使用すると動作しますが、バニラJavaScriptを使用して値を取得しようとしています。なぜこれは機能しないのですか？私はいくつかの古いコードのうち、これを取った

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

$('#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 />値ゲッターのためのコードは次のとおりです。

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; 
} 

ので鍵はvalue 1がtruthyでない場合、彼らはオプション要素のtextプロパティを取得することです。あなたの例では、<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と同じですが、スペースが崩壊していることを除いて、不一致があるかもしれません。"）

Answer 2

（あなたがsel_nodeにgetElementByIdをの結果を入れてその下のコードを仮定）、次のことを試してみてください私が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;