そんなに難しい話では無いですが、ごく最近ちょっと手間取った(力不足なだけ・・・)ので、自分用のメモ。
フォームでselectを使っている場合に、ページ内で何かの操作をした時にselectタグの子要素になるoptionの内容、要するに選択項目を書き換えたいという時が結構あると思います。
optionの追加はprepend(選択黒目の先頭に追加)またはappend(選択黒目の末尾に追加)を使います。これについては結構情報も多かったので問題は無いと思いますが、削除についての情報は少ない気がしました。
というわけで、選択項目を削除する時のコードをいくつか。
選択項目を一つだけ削除する場合
まずはこんなコード。『id=area』という指定がされているselectタグがあるとします。
$('select#area option:first-child').remove();
『first-child』で一番最初のoptionタグを指定しているので、一番最初の選択項目だけが消えます。後続の選択項目はもちろん消えません。
と書きましたが、もちろん他にもいろいろな記述法があります。なので、もう1パターンだけ。
$('select#area').children('option:first-child').remove();
こちらはchildren()を使うという方法です。動作は同じです。
『first-child』の部分を『last-child』にすると、最後の要素だけ削除することが出来ます。jQueryの基本ですが。。。
あと、optionのvalueを指定して選択項目を削除するには以下のどちらかのコードで出来ます。
$('select#area option[value=1]').remove();
$('select#area').children('option[value=1]').remove();
『option[value=(削除したいvalueの値)]』という形式ですね。これもjQueryの基本。。。
選択項目を全部まとめて削除する場合
全ての選択項目を一旦削除するのは、もっと簡単です。これも、以下のどちらでもOK。
$('select#area option').remove();
$('select#area').children().remove();
optionの後に何も指定しない、またはchildren()に何も指定しないということです。やっぱり基本。。。
まとめ
最後の「全部まとめて削除」は比較的簡単なので判りやすいと思いますが、選択項目個別の削除は意外と判らないなと思った(というか私が実際に躓いた)ので、いくつか書いてみました。
あと、セレクタについてもjQueryの基本ばかりなんですが、ちょっと忘れがちかなと思ったので、selectの操作で使いそうなものを少し書きました。
なんだかjQueryって覚えづらいんですよね・・・。