jQueryで<select>にオプション追加

jQueryで<select>要素にオプションを追加する

JavaScriptやjQueryを用いて、HTMLの<select>要素に動的にオプションを追加する方法について解説します。

HTMLの<select>要素

<select>要素は、ドロップダウンリストを作成する際に使用されます。

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

jQueryを用いたオプションの追加

jQueryの.append()メソッドを使用して、<select>要素に新しい<option>要素を追加することができます。

$(document).ready(function() {
  // 新しいオプションを追加する
  $("#mySelect").append("<option value='option3'>Option 3</option>");
});

複数のオプションを追加する

複数のオプションを追加する場合は、ループを使用して繰り返し.append()メソッドを使用することができます。

$(document).ready(function() {
  var options = ["Option 4", "Option 5", "Option 6"];

  for (var i = 0; i < options.length; i++) {
    $("#mySelect").append("<option value='option" + (i + 4) + "'>" + options[i] + "</option>");
  }
});

jQueryの.html()メソッドを使用する

.html()メソッドを使用して、<select>要素のHTML内容を完全に置き換えることもできます。

$(document).ready(function() {
  var options = ["Option 7", "Option 8"];

  $("#mySelect").html("<option value='option7'>Option 7</option><option value='option8'>Option 8</option>");
});

要素の作成と追加

.append()メソッドの代わりに、.createElement()メソッドを使用して<option>要素を作成し、.appendChild()メソッドを使用して<select>要素に追加することもできます。

$(document).ready(function() {
  var option = document.createElement("option");
  option.value = "option9";
  option.text = "Option 9";

  $("#mySelect").append(option);
});

コード解説

HTML

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

JavaScript

$(document).ready(function() {
  // 新しいオプションを追加する
  $("#mySelect").append("<option value='option3'>Option 3</option>");
});

解説

1. HTML
   <select>要素を作成し、初期のオプションを追加します。
2. JavaScript
   
   • $(document).ready(function() {}): ドキュメントが読み込まれた後に実行される関数を定義します。
   • $("#mySelect"): IDが"mySelect"の<select>要素を取得します。
   • .append("<option value='option3'>Option 3</option>"): <select>要素に新しい<option>要素を追加します。

$(document).ready(function() {
  var options = ["Option 4", "Option 5", "Option 6"];

  for (var i = 0; i < options.length; i++) {
    $("#mySelect").append("<option value='option" + (i + 4) + "'>" + options[i] + "</option>");
  }
});

1. JavaScript
   
   • var options = ["Option 4", "Option 5", "Option 6"];: オプションの配列を定義します。
   • for (var i = 0; i < options.length; i++) {}: ループを使用して、配列の各要素に対して処理を行います。
   • $("#mySelect").append("<option value='option" + (i + 4) + "'>" + options[i] + "</option>"): ループ内で、新しい<option>要素を作成し、<select>要素に追加します。

$(document).ready(function() {
  var options = ["Option 7", "Option 8"];

  $("#mySelect").html("<option value='option7'>Option 7</option><option value='option8'>Option 8</option>");
});

1. JavaScript
   
   • $("#mySelect").html("<option value='option7'>Option 7</option><option value='option8'>Option 8</option>"): <select>要素のHTML内容を、新しいオプションを含むHTML文字列で置き換えます。

$(document).ready(function() {
  var option = document.createElement("option");
  option.value = "option9";
  option.text = "Option 9";

  $("#mySelect").append(option);
});

1. JavaScript
   
   • var option = document.createElement("option"): 新しい<option>要素を作成します。
   • option.value = "option9";: オプションの値を設定します。
   • $("#mySelect").append(option): 作成した<option>要素を<select>要素に追加します。

直接DOM操作

jQueryを使用せずに、JavaScriptのDOM操作を用いて直接オプションを追加することもできます。

var selectElement = document.getElementById("mySelect");
var optionElement = document.createElement("option");
optionElement.value = "option10";
optionElement.text = "Option 10";
selectElement.appendChild(optionElement);

jQueryの.clone()メソッド

既存のオプションを複製して追加することもできます。

var existingOption = $("#mySelect option:first");
var newOption = existingOption.clone();
newOption.val("option11");
newOption.text("Option 11");
$("#mySelect").append(newOption);

配列からオプションを作成し、一度に追加することもできます。

var optionsData = ["Option 12", "Option 13"];
var newOptions = optionsData.map(function(optionText) {
  return $("<option>", { value: optionText, text: optionText });
});
$("#mySelect").append(newOptions);

配列の各要素に対してオプションを作成し、追加することもできます。

var optionsData = ["Option 14", "Option 15"];
$.each(optionsData, function(index, optionText) {
  $("#mySelect").append("<option value='" + optionText + "'>" + optionText + "</option>");
});

jQueryの.empty()メソッドと.append()メソッドの組み合わせ

既存のオプションをすべて削除し、新しいオプションを追加することもできます。

$("#mySelect").empty();
$("#mySelect").append("<option value='option16'>Option 16</option>");