jQueryでselect要素の中のoption要素の削除方法を解説！

jQueryでselect要素の中のoption要素の削除方法を項目を分けて解説します。

select要素の最初のoption要素を削除する方法について解説します。

最初のoption要素を削除するには擬似クラスの:first-childを利用してセレクタ指定します。

このようにoption要素の1番目である「男性」が消えていることが分かります。

コードはまずselect要素のidを指定して、option要素はselect要素の子要素なので、childrenメソッドを用います。

そして最初の要素を削除したいので、:first-childを用いてremoveメソッドで削除します。

select要素の最後のoption要素を削除するには、:last-childを用います。

このようにoption要素の最後である「その他」が消えていることが分かります。

コードとしては「select要素の最初のoption要素を削除する方法」で紹介したコードの:first-childを:last-childに変えただけとなります。

select要素のn番目のoption要素を削除するには:nth-childを使用します。

このように2番目のoption要素である「女性」が消えていることが分かります。

コードとしては今まで紹介した、:first-child、:last-childの部分を:nth-childに変えただけとなります。

option要素のvalueを指定して選択項目を削除するには、これまで紹介したコードのchildrenメソッドの中で、option要素のvalueを指定します。

このようにoption要素のvalue値がotherである「その他」が消えていることが分かります。

コードとしてはこれまで紹介したコードのchildrenメソッドの中身をoption[value=value値]としています。

またこちらchildrenメソッドを使わなくても実現できます。

サンプルコードを用意したので見てみましょう。

上記のサンプルコードのようにまとめて記述することもできます。

選択項目を全部まとめて削除して初期化するということは、すなわちselect要素の子要素であるoption要素を全て削除するということです。

サンプルコードを用意したので確認してみましょう。

このようにselect要素の子要素であるoption要素が初期化されていることが分かります。

コードとしてはとても簡単で、select要素に対してchildrenメソッドを用いて、さらにremoveメソッドで、子要素全て削除しているだけとなります。

いかがでしたでしょうか？

ぜひここで紹介した様々なjQueryでselect要素の中のoption要素の削除方法を試してみてください。