jQueryでDropDownリストを自由自在に操る！オプション追加の3つのテクニック

2024-04-08

jQueryを使ってDropDownリストにオプションを追加する方法

方法1：append()メソッドを使う

追加したいオプションのHTML要素を作成します。
append()メソッドを使って、作成したHTML要素をDropDownリストの要素に追加します。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    $("#myDropDown").append("<option value='3'>オプション3</option>");
  });
</script>

追加したいオプションのデータオブジェクトを用意します。
$.each()メソッドを使って、データオブジェクトをループ処理します。
ループ処理の中で、それぞれのオプションのHTML要素を作成し、DropDownリストの要素に追加します。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    var options = [
      { value: "3", text: "オプション3" },
      { value: "4", text: "オプション4" },
    ];

    $.each(options, function(index, option) {
      $("#myDropDown").append("<option value='" + option.value + "'>" + option.text + "</option>");
    });
  });
</script>

補足

上記の例では、id属性がmyDropDownのDropDownリストにオプションを追加しています。
オプションのHTML要素は、<option value="値">表示テキスト</option>のように記述します。
value属性には、オプションの値を指定します。
text属性には、オプションに表示されるテキストを指定します。

jQueryでDropDownリストにオプションを追加するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでDropDownリストにオプションを追加</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>jQueryでDropDownリストにオプションを追加</h1>

  <select id="myDropDown">
    <option value="1">オプション1</option>
    <option value="2">オプション2</option>
  </select>

  <button id="addOptionButton1">オプション追加（append()メソッド）</button>
  <button id="addOptionButton2">オプション追加（$.each()メソッド）</button>

  <script>
    $(document).ready(function() {
      $("#addOptionButton1").click(function() {
        $("#myDropDown").append("<option value='3'>オプション3</option>");
      });

      $("#addOptionButton2").click(function() {
        var options = [
          { value: "4", text: "オプション4" },
          { value: "5", text: "オプション5" },
        ];

        $.each(options, function(index, option) {
          $("#myDropDown").append("<option value='" + option.value + "'>" + option.text + "</option>");
        });
      });
    });
  </script>
</body>
</html>

説明

HTML
- <select id="myDropDown">：オプションを追加するDropDownリストです。
- <option value="1">オプション1</option>：DropDownリストに最初から存在するオプションです。
- <button id="addOptionButton1">オプション追加（append()メソッド）</button>：append()メソッドを使ってオプションを追加するボタンです。
JavaScript
- $(document).ready(function() { ... });：DOMContentLoadedイベントが発生したら実行される処理です。
- $("#addOptionButton1").click(function() { ... });：addOptionButton1ボタンがクリックされたら実行される処理です。
  - この処理では、<option value='3'>オプション3</option>というHTML要素を作成し、$("#myDropDown")にappend()メソッドを使って追加しています。
- $("#addOptionButton2").click(function() { ... });：addOptionButton2ボタンがクリックされたら実行される処理です。
  - この処理では、以下の配列を作成します。
```
var options = [
  { value: "4", text: "オプション4" },
  { value: "5", text: "オプション5" },
];
```

実行方法

上記のHTMLコードを保存して、index.htmlなどの名前で保存します。
Webブラウザで、index.htmlファイルを開きます。
オプション追加（append()メソッド） ボタンをクリックすると、オプション3というオプションがDropDownリストに追加されます。

このサンプルコードをどのようにカスタマイズできるか

追加するオプションの値とテキストを自由に変更できます。
ボタンではなく、他のイベント（例：ページロード時）にオプションを追加する処理を実行することもできます。
既存のDropDownリストのオプションを削除したり、変更したりする処理を追加することもできます。

jQueryを使ってDropDownリストにオプションを追加するその他の方法

jQueryのval()とtext()メソッドを使う

この方法は、append()メソッドと同様に、1つのオプションを追加する場合に便利です。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    $("#myDropDown").val("3").text("オプション3");
  });
</script>

$("#myDropDown").val("3")：DropDownリストのvalue属性を3に設定します。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    $("#myDropDown").attr("value", "3").attr("text", "オプション3");
  });
</script>

この方法は、DropDownリストのすべてのオプションを一度に置き換える場合に便利です。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    $("#myDropDown").html("<option value='3'>オプション3</option><option value='4'>オプション4</option>");
  });
</script>

$("#myDropDown").html("<option value='3'>オプション3</option><option value='4'>オプション4</option>")：DropDownリストのすべてのオプションを、指定したHTML要素で置き換えます。

この方法は、既存のオプションを複製して、新しいオプションを追加する場合に便利です。

<select id="myDropDown">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
</select>

<script>
  $(document).ready(function() {
    var option1 = $("#myDropDown option[value='1']").clone();
    option1.val("3").text("オプション3");
    $("#myDropDown").append(option1);
  });
</script>

var option1 = $("#myDropDown option[value='1']").clone();：value属性が1のオプションを複製します。
option1.val("3").text("オプション3");：複製したオプションのvalue属性を3に、テキストをオプション3に変更します。
$("#myDropDown").append(option1);：複製したオプションをDropDownリストに追加します。

1つのオプションを追加する場合
- append()メソッド：シンプルでわかりやすい方法です。
- val()メソッドとtext()メソッド：コードが短くなります。
すべてのオプションを置き換える場合
既存のオプションを複製して新しいオプションを追加する場合
- clone()メソッド：柔軟性が高い方法です。