SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【Javascript】動的に生成したoption要素のtextが反映されない(IEで) その2

option.text を使った場合の困りごとを書いたことがありますが、DOM関数版も書いてみます。option.textやoption.innerTextは使いません。こちらのほうがより汎用的、標準寄りかなと思います。

サンプルコード

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>セレクトボックステスト</title>
<script type="text/javascript">
function addOption() {
	var select = document.getElementById('sample')
	var option = document.createElement('option')
	option.value = "123456"
	//画面に表示されるテキスト部分は createTextNode で作って、optionの子要素として追加
	option.appendChild(document.createTextNode('表示用文字列'))
	//プルダウンに追加
	select.appendChild(option)
}
</script>
</head>
<body>
<select id="sample">
<option> - - - - </option>
</select>
<input type="button" value="option追加" onclick="addOption()" />
</body>
</html>

動作サンプル

ボタンを押した後、セレクトボックスを開かないと増えた様子が分かりませんが…

動作は、Firefox、IE6(WindowsXP)、IE7(WindowsXP)、IE8(WindowsVista)、Opera、Chrome で確認。

ちなみに、 element.setAttribute(“value”, “123”) はやりません。何が起きるかはまた次回。

関連するメモ

コメント(1)

【Javascript】動的に生成したoption要素のtextが反映されない(IEで) at softelメモ 2010年3月13日 12:00

[…] <追記> よければこちらもどうぞ → より汎用的 DOM関数版 […]