ほんじゃら堂

めんどくさい仕事をラクにする作業自動化レシピ集

Javascriptでselectメニュー要素を更新

検索してなかなか見つからなかった情報を解決した時は、エントリにして載せることにした。
将来同じ問題にぶつかった時を考えると、自分がどこかに書いたメモを探すよりも先にWebで検索するだろうし、そんな時に自分が過去に書いたエントリが出てきて解決できたら、自分大好きな僕は非常にいい気分になるのではなかろうか。


今回はJavascriptを使ってselectメニューの内容を削除したり追加したりする方法について。
おそらく最善の策ではないが、とりあえずInternet Explorer7とFirefox2ではうまく表示された。

prototype.jsを使用。

selectメニューの全要素を削除

while ($('select1').length > 0) {
$('select1').remove(0);
}

selectメニューに要素を追加

var option = document.createElement("option");
option.text = "新しい選択肢";
option.value = "1";
if (navigator.userAgent.match(/Gecko/)) {
$('select1').appendChild(option);
} else {
$('select1').add(option);
}


おお、これがスーパーpre記法か。


絶対もっといい方法がある。でも今はもう探したくないのでここまで。
次回のリファクタリング課題に入れて先へ進もう。