jQueryでselectタグ内のoptionタグを削除する方法をいくつか

そんなに難しい話では無いですが、ごく最近ちょっと手間取った(力不足なだけ・・・)ので、自分用のメモ。

フォームで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って覚えづらいんですよね・・・。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます