[JavaScript] id属性を設定したselect（セレクトボックス）の値を取得する

Webページに表示したselectタグ（セレクトボックスまたはプルダウンメニュー）が現在選択している値を JavaScript で取得する方法についてです。

以下のようなセレクトボックスをHTMLで作成したとします。

<select>
    <option value="1">LEVEL 1</option>
    <option value="2">LEVEL 2</option>
    <option value="3">LEVEL 3</option>
    <option value="4">LEVEL 4</option>
    <option value="5">LEVEL 5</option>
    <option value="6">LEVEL 6</option>
    <option value="7">LEVEL 7</option>
    <option value="8">LEVEL 8</option>
    <option value="9">LEVEL 9</option>
    <option value="10">LEVEL 10</option>
</select>

このセレクトボックスから値（optionタグのvalue属性）を取得するには、まずselectタグに以下のように　id属性 を設定します。この例では「levelSelect」とします。

<select id="levelSelect">
    <option value="1">LEVEL 1</option>
    <option value="2">LEVEL 2</option>
    <option value="3">LEVEL 3</option>
    <option value="4">LEVEL 4</option>
    <option value="5">LEVEL 5</option>
    <option value="6">LEVEL 6</option>
    <option value="7">LEVEL 7</option>
    <option value="8">LEVEL 8</option>
    <option value="9">LEVEL 9</option>
    <option value="10">LEVEL 10</option>
</select>

JavaScript側では getElementById を利用して値を取得できます。先ほどselectタグに設定したid属性の値を引数として以下のように書きます。

var levelValue = document.getElementById("levelSelect").value;

この処理を実行したタイミングで、セレクトボックスで現在選択している値が変数 levelValue に格納されます。

選択項目を変更した際に値を取得

セレクトボックスの選択項目を変更した瞬間に値を取得したい場合は、このセレクトボックスにイベント（change）を設定します。

 
// 選択項目を変更したタイミングでセレクトボックスの値を取得する例

document.getElementById("levelSelect").addEventListener('change', function(e) {
    e.preventDefault();

    var levelValue = document.getElementById("levelSelect").value;

}, false);

ボタンを押したタイミングで値を取得

あるボタンを押したタイミングでセレクトボックスの値を取得したいという場合は、この処理をボタンのクリックイベント内で行います。例えば、以下のようなスクリプトが考えられます。

// id が myButton のボタンをクリックしたタイミングでセレクトボックスの値を取得する例

document.getElementById("myButton").addEventListener('click', function(e) {
    e.preventDefault();

    var levelValue = document.getElementById("levelSelect").value;

}, false);

以上、id属性を設定したselectタグの値をJavaScriptで取得する方法でした。