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の仕様
仕様はこのようになっています。注目ポイントは第2、第3引数で、両方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を追加する方法」でした。