JavaScriptの動かないコード (中級編) selectの中味を書き換えるときのエラー

連載目次へ

以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分）

<select id="my_select">
	<option>変更前</option>
</select>

<input type="button" value="セレクトの中身変更" onClick="f()" >

<script language="JavaScript">

function f()
{
	//alert( my_select.innerHTML );

	// 書き換え
	my_select.innerHTML = "<option>変更後</option>";

	//alert( my_select.innerHTML );
}

</script>

発生する不具合

IEにバグがあるため，IEではselect内部のinnerHTMLを正常に書き換える事ができない。

この場合，「変更前」という表示が消滅しただけで終わってしまう。

上記のコードの１番目のアラートでは

<option>変更前</option>

と表示される。しかし，２番目のアラートではなんと

変更後</option>

となってしまう。

れっきとしたバグ

このようなエラーは，直接innerHTMLプロパティを指定して処理を試みた場合に限らず，jQueryや他のライブラリを使って間接的にセレクトボックス内のinnerHTMLを操作しようとした際にも発生する。

マイクロソフトは，このエラーについて説明のページを設けている。

BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object
http://support.microsoft.com/?scid=kb...

BUG: Internet Explorer は、オブジェクト選択の innerHTML プロパティを設定するのに失敗します。
http://support.microsoft.com/kb/276228

対処法

IEでも正常に動かしたい場合は，下記のようにDOM要素を作成する。

<select id="my_select">
	<option id="option1">変更前</option>
</select>

<input type="button" value="セレクトの中身変更" onClick="f()" >

<script language="JavaScript">

function f()
{
	//alert( my_select.innerHTML );
	
	// option 要素を作成
	var e_opt = document.createElement( "option" );
	var e_txt = document.createTextNode( "変更後" );
	e_opt.appendChild( e_txt );

	// option 要素を追加
	my_select.removeChild( option1 );
	my_select.appendChild( e_opt );

	//alert( my_select.innerHTML );
}

</script>

非常に面倒くさい。

なお，冒頭のコードはFirefoxでは正常に動く。

連載目次へ