jQuery でセレクトボックスの option 要素を追加/削除する方法

2017/02/15 ,

フォームオブジェクトの処理で、意外と手こずるのが select 系の操作です。選択肢の構成変更をする上でも jQuery が有効に利用できるので、optin 要素の処理方法は、是非 select の操作とセットで覚えておきましょう。

jQuery でセレクトボックスの value 値/テキストを選択/設定/取得する方法
select ボックスにおける基本的な動作のサンプルです。通常の Javascript では、value 値のみで取り扱われるケースが多いですが、option 内のテ...

以下、サンプルプログラムでは具体的に id=”select_test” の属性を持つセレクトボックスの例で説明します。

option 要素を追加する方法

value=”999″、テキストが「追加した選択肢」となる option 要素を追加します。サンプルプログラムは option の末尾に追加するケースです。

方法としてはどちらも option 要素を生成して、select ボックスに加える処理となります。.append() を利用しているので一番最後の要素として追加されます。もし、一番最初の要素として追加したい場合は、.prepend() を使用してください。
どちらも同じ結果になりますが、value 値やテキストが変数の場合は、後者の方が勝手が良さそうです。

セレクトボックスへの option 要素追加のサンプル



位置を指定して option 要素を追加する方法

末尾に追加する場合は .append()、最初に追加する場合は .prepend() と簡単に追加出来ますが、位置を指定して追加することも可能です。その場合、どのoption要素の次に追加するか、もしくは前に追加するかを指示してあげます。
以下のサンプルプログラムでは、value=”888″、テキストが「追加した選択肢2」となる option 要素を追加します。

セレクトボックスの option 要素を指定する方法は option[value=”値”] です。こちらも基本的な内容となります。サンプルは指定した要素の後ろに追加する仕組みとなります。指定要素の前に追加したい場合は .before() を使用してください。

セレクトボックスへの位置指定による option 要素追加のサンプル




これで好きな位置に差し込むことができますね。上記例では、「選択肢2」の後ろに要素が追加されます。

option 要素を削除する方法

上記のサンプルで既出ですが、オプション要素を選択して、それを丸ごと削除するだけです。

テキスト値から判断する場合は、少し工夫が必要です。

option要素削除のサンプル

value=”2″(選択肢2)のoption要素を削除します。



以上、セレクトボックスの option 要素を編集するサンプルでした。

PAGE TOP ↑