HOME > blog > JavaScript > IEでのselect

IEでのselect

option要素ってvalue属性が指定されていない場合はoption要素の内容をvalueの値として扱うことになっているはずなのですが、IEの場合はそのルールが適用されません。

以下、サンプル。

サンプルのコードは以下の通り。

<div>
<select id="test_select_01" onchange="javascript:alert(this.value)">
    <option disabled="disabled" selected="selected">-- どれか選んでね --</option>
    <option>選択肢 1</option>
    <option>選択肢 2</option>
    <option>選択肢 3</option>
</select>
</div>

「選択肢 n」(nは選択したoptionの数字)がアラートで表示されなきゃいけないはずなんですが……。

ちなみに各option要素にvalue属性を設定すればIEでも問題なくvalueの値を返すようになります。

2つめのサンプルのコードは以下の通り。

<div>
<select id="test_select_02" onchange="javascript:alert(this.value)">
    <option disabled="disabled" selected="selected">-- どれか選んでね --</option>
    <option value="選択肢 1">選択肢 1</option>
    <option value="選択肢 2">選択肢 2</option>
    <option value="選択肢 3">選択肢 3</option>
</select>
</div>

なおIEではoption要素内のdisabled属性(選択不可)も機能しません(IE7以前の場合)

カテゴリー: JavaScript タグ: ,