【Javascript】select（セレクトボックス）の中身を書き換えるとき

Tweet

Category JavaScript 2011/10/14

問題

IEで、セレクトボックスの中身を書き換えようとしたら、空になってしまいました。

function kakikae()
{
	var select = document.getElementById('xxxx');
	select.innerHTML = '<option>変更後</option>';
}

答え

IEでは、セレクトボックスをinnerHTMLで書き換えることができない不具合がある。

現象： 選択オブジェクトのinnerHTMLプロパティを設定すると、変更の効果が正しくなりません。

http://support.microsoft.com/?scid=kb%3Ben-us%3B276228&x=19&y=17
http://support.microsoft.com/kb/276228

innerHTMLを使わない書き方をするとよい。

function kakikae()
{
	var select = document.getElementById('xxxx');

	// option要素を削除（方法はいろいろありますが）
	while (0 < select.childNodes.length) {
		select.removeChild(select.childNodes[0]);
	}

	// option要素を生成
	var option = document.createElement('option');
	var text = document.createTextNode('変更後');
	option.appendChild(text);

	// option要素を追加
	select.appendChild(option);

	// 必要な分だけoption生成と追加を繰り返す
}