IEではinnerHTMLでselect要素内にoption要素を挿入できない

公開日: カテゴリー: JavaScript タグ: 、

IEではinnerHTMLでselect要素内にoption要素を挿入することができません。

例えば下の「HereClick!」というボタンを押すと、IE以外では何も入っていないプルダウンメニューに「OPTION 01」「OPTION 02」「OPTION 03」という選択肢が出現しますが、IEでは出現しません。

以下がサンプルのコード。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
<![CDATA[
function test_button_02() {
    var html;
    var values = new Array("OPTION 01", "OPTION 02", "OPTION 03");
    for (var i = 0; values[i]; i++) {
        html += '<option>' + values[i] + '</option>';
    }
    var node = document.getElementById('test_select_02');
    node.innerHTML = html;
}
]]>
</script>
<form>
<select id="test_select_03">
</select>
<input type="button" onclick="test_button_02()" value="HereClick!">
</form>