【jQuery】select要素のoptionを削除する

こんにちは、Ryohei（@ityryohei）です！

jQueryでselect要素のoptionを削除する方法のご紹介です。

本記事では「option」を削除する方法を簡単なサンプルをまじえてご紹介しています。

select要素とは、一般的にセレクトボックスと呼ばれるフォーム内で使用する要素になります。フォームや一覧ページなどでソートする際、ソート順の選択に使用ことが多いかと思います。表示としましては、プルダウンのリストの中に複数の選択肢が用意されていて、リストの中から一つの値を選択する形となります。

具体的には下記のような表示となります。

北海道地方東北地方関東地方中部地方近畿地方中国地方四国地方九州地方

optionを削除するだけであれば直接ソースを修正すれば良いのですが、今回select要素のoptionをjQueryで削除することになった経緯として、HTMLが直接編集できない領域、いわゆる外部のシステムが自動で追加したselect要素のoptionを削除したかったため、jQueryでスクリプトを作成した次第です。

今回はシステムが追加したoptionを削除するために使用しましたが、他に考えられる用途として、月や日によって自動でoptionの選択肢を減らしたり、ラジオボタンやチェックボックスといった他のフォーム要素の選択によって値を変更するなど、様々な使い方ができるかと思います。

select要素のoptionの削除方法をお探しの方の参考になれば幸いです。

本記事の内容

• select要素を取得する方法
• select要素の最初のoptionを削除する
• select要素の最後のoptionを削除する
• select要素のn番目のoptionを削除する
• select要素のoptionの値を指定して削除する

では、解説していきます。

select要素を取得する方法

最初にselect要素を取得します。下記の例ですとname属性を指定して取得していますが、idやclassで取得いただいても問題ありません。記述に応じて取得方法をご検討ください。

HTML

<select name="area">
  <option value="北海道地方">北海道地方</option>
  <option value="東北地方">東北地方</option>
  <option value="関東地方">関東地方</option>
  <option value="中部地方">中部地方</option>
  <option value="近畿地方">近畿地方</option>
  <option value="中国地方">中国地方</option>
  <option value="四国地方">四国地方</option>
  <option value="九州地方">九州地方</option>
</select>

JS

var selectbox = $('select[name=area]');

以降は上記の方法で取得したselect要素に対して、何番目もしくは値を削除してoptionを削除する方法をご紹介していきます。

select要素の最初のoptionを削除する

取得したselect要素の最初のoptionを削除する方法になります。

childrenに疑似クラスを指定してoptionを指定する方法と、jQueryのfirst()を使用する方法をご紹介しています。

JS

chldrenに疑似クラスを指定した方法になります。children()の引数に疑似クラスを指定することができます。疑似クラスを指定してoptionの最初の要素に処理を実行します。

var selectbox = $('select[name=area]');

selectbox.children('option:first-child').remove();

JS

jQueryのfirst()を使用した方法になります。first()を使用することで、要素の中に存在する最初の要素だけを取り出して削除することができます。

var selectbox = $('select[name=area]');

selectbox.children().first().remove();

select要素の最後のoptionを削除する

取得したselect要素の最後のoptionを削除する方法になります。

childrenに疑似クラスを指定してoptionを指定する方法と、jQueryのlast()を使用する方法をご紹介しています。

取得したselect要素の最後のoptionを削除する方法になります。childrenに指定する方法と、lastを使用する方法をご紹介しています。

JS

chldrenに疑似クラスを指定した方法になります。children()の引数に疑似クラスを指定することができます。疑似クラスを指定してoptionの最初の要素に処理を実行します。

var selectbox = $('select[name=area]');

selectbox.children('option:last-child').remove();

JS

jQueryのlast()を使用した方法になります。last()を使用することで、要素の中に存在する最後の要素だけを取り出して削除することができます。

var selectbox = $('select[name=area]');

selectbox.children().last().remove();

select要素のn番目のoptionを削除する

取得したselect要素のn番目のoptionを削除します。n番目の要素の指定は、children()の引数に疑似クラスを使用して行います。疑似クラスはCSSと同じ記述でn番目の要素を取得、削除が可能となります。

JS

var selectbox = $('select[name=area]');

selectbox.children('option:nth-child(3)').remove();

もし、4番目の要素を削除したい場合はnth-child(3)の中身を4に変更して実行いただければと思います。

select要素のoptionの値を指定して削除する

最後に、取得したselect要素の中から特定の値を持つoptionを削除する方法のご紹介です。

children()の引数に属性と値を指定することで特定の値を持つoptionを削除することができます。

JS

var selectbox = $('select[name=area]');

selectbox.children('option[value=北海道地方]').remove();

もし、「九州地方」のoptionが削除したい場合は「北海道地方」を「九州地方」に変えることで削除することが可能となります。

jQueryを使うときは、基本的にidやclass、タグ名をセレクタに指定することが多いですが、属性も指定することが可能となります。セレクタに指定することができる値を多く知っておくことで要素の取得方法の幅広がり、結果としてjQueryで実現できることが増えますので、おすすめです。

以上、jQueryでselect要素のoptionを削除する方法のご紹介でした！