JavaScriptでプルダウンの選択された値の取得や値の選択の設定の方法

PROGRAM

今回は、JavaScriptでプルダウンの選択された値の取得や値の選択の設定の方法について、それぞれに分け、簡単に解説していきます。

プルダウンのHTML上のタグの基本構造

プルダウンはHTMLタグでselectタグとoptionタグの2つによって作ることができます。

optionタグで選択肢を作って、selectタグでそれらを囲むことで、プルダウンを作ることができます。

<select id="hoge">
    <option value="english">英語</option>
    <option value="french">フランス語</option>
    <option value="chinese">中国語</option>
</select>

上記のコードでは、hogeというidを持つプルダウンを作り、選択肢には英語とフランス語、中国語の3つを用意しています。

プルダウンの選択された値の取得

プルダウンで選択された値はプルダウン要素のvalueプロパティで取得できます。

この場合、formタグからではなくid等でプルダウンの要素を特定する必要があります。

var val = document.getElementById("hoge").value;

上記のコードでは、hogeというidを持つプルダウンで選択されている値をvalという変数に代入しています。

プルダウンの値の選択の設定

プルダウン要素のselectedIndexプロパティで値の選択の設定ができます。

選択肢は上から順番に0から数えていき、対象の選択肢の値を代入式で設定します。

document.getElementById("hoge").selectedIndex = 1;

上記のコードでは、hogeというidを持つプルダウンの0から数えて1番目の選択肢を選択させています。