SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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生成と追加を繰り返す
}

関連するメモ

コメント