読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

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

javascript 動かないコード


以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)

<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を正常に書き換える事ができない。


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

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

<option>変更前</option>

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

変更後</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では正常に動く。