【Javascript】動的に生成したoption要素のtextが反映されない（IEで） その２
Category JavaScript
2010/03/04
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”) はやりません。何が起きるかはまた次回。
【Javascript】動的に生成したoption要素のtextが反映されない（IEで） at softelメモ 2010年3月13日 12:00
[…] ＜追記＞ よければこちらもどうぞ → より汎用的 DOM関数版 […]