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の仕様

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

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

The Option() constructor creates a new HTMLOptionElement.

応用編

仕様を元に応用してみます。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を追加する方法」でした。

Let's share SNS