【JavaScript】セレクトボックスの値を設定／取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでセレクトボックスの値を設定／取得する方法をご紹介しています。

「フォームのセレクトボックスの値で処理したいんだけど、どうすればいいの？」

とお悩みの方の参考になれば幸いです！

※フォームで使用する代表的な要素の簡単な設定／取得方法は下記の記事でご紹介しておりますので、あわせてご参照いただければと思います。

では、解説していきます。

要素の取得方法について

JavaScriptでは要素を取得する方法が様々あります。よく使うものでは下記があります。

document.getElementById();
document.getElementsByClassName();
document.getElementsByTagName();
document.getElementsByName();

CSSのセレクタで指定する方法もありますね。

document.querySelector();
document.querySelectorAll();

どれでも要素を取得することができますが、今回はフォーム要素を取得しますので、documentの「forms」プロパティを使用してみます。

セレクトボックスを取得する

では早速セレクトボックスを取得してみましょう。

今回使用するHTMLは下記のような感じです。セレクトボックスだけを持つフォームになります。前項でお話しした通り「forms」プロパティを使用してフォームからセレクトボックスだけを取得します。

HTML

<form>
    <select name="selectbox">
        <option value="">--選択してください--</option>
        <option value="javascript">JavaScript</option>
        <option value="jquery">jQuery</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
    </select>
</form>

JS

let form = document.forms[0];
let selectbox = form.selectbox;

console.log(selectbox);

実行結果

<select name="selectbox">
    <option value="">--選択してください--</option>
    <option value="javascript">JavaScript</option>
    <option value="jquery">jQuery</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
</select>

ちゃんとフォームからセレクトボックスだけを取得することができていますね！

ちなみに「forms」に指定しているのは番号はフォームのインデックス番号です。HTML内に複数のフォームがある場合は上の行から順番に「0, 1 ...」と番号を指定することでフォームを取得することができます。

セレクトボックスの値を取得する

続いて前項で取得したセレクトボックスから値を取得してみます。今回はセレクトボックスの選択が変更された場合に値を取得してみます。（HTMLは同じものを使用するので省略しますね。）

JS

let form = document.forms[0];
let selectbox = form.selectbox;

selectbox.addEventListener('change', ()=> {
    console.log(selectbox.value);
}, false);

下記はセレクトボックスの値を取得するデモになります。コンソールを見ると値が出力されていることがわかるかと思います。

See the Pen
QWbwpqZ by ryohei (@intotheprogram)
on CodePen.

セレクトボックスの値を設定する

セレクトボックスの値は簡単に取得することができますが、今回のサンプルのように選択されたセレクトボックスの値を設定するには一工夫必要です。

JS

let form = document.forms[0];
let selectbox = form.selectbox;

//console.log(selectbox);

selectbox.addEventListener('change', ()=> {
   index = selectbox.selectedIndex; //選択されたoptionのindexを取得
   selectbox.options[index].value = 'selected'; //indexにあるoptionに値を設定
   console.log(selectbox.value);
}, false);

これで選択されたオプションの値を設定できます。セレクトボックスの選択を変更すると選択したオプションの値が「selected」になります。

See the Pen
Set Selectbox Value | JavaScript by ryohei (@intotheprogram)
on CodePen.

こんな風に使用することはあまりないと思いますが、参考までに！