HTMLのslect要素に動的にoptionを追加する方法

HTMLのslect要素に動的にoptionを追加する方法をご紹介します。

次のようなHTMLに対して

<select name="test_select"></select>

このようなjavascriptを書きます。

$("select[name='test_select']").append(new Option("text1", "value1"));

javascriptが実行されると、次のようなHTMLが生成されます。

<select name="test_select">
  <option value="value1">text1</option>
</select>

javascriptの仕様

仕様はこのようになっています。注目ポイントは第２、第３引数で、両方trueにすると表示された時点で選択状態になります。

var optionElementReference = new Option(text, value, defaultSelected, selected);

HTMLOptionElement: Option() constructor – mozilla.org

応用編

仕様を元に応用してみます。option要素を追加する際にオプションを指定して任意のoptionを選択状態にします。また、Bootstrapを使用しておしゃれにしてみます。

HTML

<form class="p-3">
  <div class="form-group">
    <label class="control-label col-3">Test</label>
    <div class="col-3">
      <select name="test_select" class="form-control"></select>
    </div>
  </div>
</form>

javascript

$(function() {
  // var optionElementReference = new Option(text, value, defaultSelected, selected);
  $("select[name='test_select']").append(new Option("text1", "value1"));
  $("select[name='test_select']").append(new Option("text2", "value2", "true", "true"));
  $("select[name='test_select']").append(new Option("text3", "value3", "true"));
});

生成されたHTML

<form class="p-3">
  <div class="form-group">
    <label class="control-label col-3">Test</label>
    <div class="col-3">
      <select name="test_select" class="form-control">
        <option value="value1">text1</option>
        <option value="value2" selected="">text2</option>
        <option value="value3" selected="">text3</option>
      </select>
    </div>
  </div>
</form>

生成されたWeb画面

以上、「HTMLのslect要素に動的にoptionを追加する方法」でした。