JavaScriptでselect要素のoption（項目）をセレクトする

JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。

似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同してしまったので、整理してみました。

はじめに

例えば、以下のようなセレクトボックスがあったとします。

<select id="age" name="age">
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>

JavaScriptで、ある項目をデフォルトの選択にしたい場合と、単純に選択状態にしたいだけの場合と、意味合いが若干変わってきます。

ある項目をデフォルトに設定する場合

例えば、option要素の「21」をデフォルトの項目として設定したい場合。

何番目で指定する

1番目を０から数えるので、「21」は４番目なので、「3」を指定します。

document.getElementById("age").options[3].setAttribute("selected", "selected");

// jQueryを使った書き方
$("#age").find("option").eq(3).attr("selected", "selected");
// 別の書き方
$("#age option:eq(3)").attr("selected", "selected");

値で指定する

document.getElementById("age").querySelector("option[value='21']").setAttribute("selected", "selected");

// jQueryを使った書き方
$("#age").find("option[value='21']").attr("selected", "selected");
// 別の書き方
$("#age option[value='21']").attr("selected", "selected");

結果

以下のように、selected="selected"が挿入され、自動的にセレクトされた状態にもなりますが、前後で別のセレクト処理などをしていると、この処理ではセレクトされた状態にならない場合があります。

<select id="age" name="age">
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21" selected="selected">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>

ある項目を選択状態にする場合

例えば、option要素の「21」を選択された状態にしたい場合。

何番目で指定する

1番目を０から数えるので、「21」は４番目なので、「3」を指定します。

document.getElementById("age").options[3].selected = true;

// jQueryを使った書き方
$("#age").find("option").eq(3).prop('selected', true);
// 別の書き方
$("#age option:eq(3)").prop('selected', true);

値で指定する

document.getElementById("age").querySelector("option[value='21']").selected = true;

// jQueryを使った書き方
$("#age").find("option[value='21']").prop('selected', true);
// 別の書き方
$("#age option[value='21']").prop('selected', true);

結果

以下のように、selected="selected"は挿入されず、ブラウザ上では「21」が選択された状態になります。

<select id="age" name="age">
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>

まとめ

JavaScriptでフォームの内容をいろいろいじりたい時は、上記の２つの違いを理解していないと、思い通りの挙動にならない場合があるので、注意したいですね。

「selected」を挿入したい場合は、

目的の要素.setAttribute("selected", "selected");

// jQueryを使った書き方
目的の要素.attr("selected", "selected");

ただ選択させたいだけの場合は、

目的の要素.selected = true;

// jQueryを使った書き方
目的の要素.prop('selected', true);

ということになります。