jQueryでselect要素のoption操作

selectタグで配置されるプルダウンメニュー、ないしリストボックスといったものの呼び方がどうも統一されてない＆selectという単語が一般的なせいで、何かと検索で調べにくいのにはいつも困る。

さておき、id="target"なるselect要素の末尾にオプションを追加したいといった場合。jQueryの$()関数はprototype.jsとは違ってHTML要素ないしDOM要素ではなくjQueryオブジェクトを返すため、

var elm = $("#target");
elm.length = elm.length + 1;
elm.options[elm.length - 1].text = "その他";
elm.options[elm.length - 1].value = "99";

上記のコードは期待通りには動作しない。jQuery的にはappend()を使えばいいらしい。

$("#target").append('<option value="99">その他</option>');

このようにinnerHTMLをそのまま書くこともできるが、$()関数とjQueryオブジェクトの持つメソッドを使ってDOM要素をコネコネ作成するのがよりjQuery的な感じ。

var elm = $("<option>").html('その他').attr({ value: 99 });
$("#target").append(elm);

option要素を一括して削除するには、

$("#target").children().remove();

特定のoption要素を選択して削除するには、

$("#target").children('[@value=99]').remove();

こうやってCSSやXPathで要素を検索できるあたりがjQuery最大の長所らしい。