【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.

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

最後に

今回はフォーム内にあるセレクトボックスの値を設定/取得する方法をご紹介してきました。もちろんフォーム以外の場所でもセレクトボックスを使用することはありますので、その場合は「id」や「class」で取得してご使用いただければと思います!

以上、JavaScriptでセレクトボックスの値を設定/取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍