JavaScriptでselectオブジェクトの値(value)を取得する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでselectオブジェクトの値(value)を取得する方法について現役エンジニアが解説しています。selectタグはフォームの部品で、JavaScriptで要素オブジェクトを取得すると選択項目の値を取得することが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでselectオブジェクトの値(value)を取得する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでselectオブジェクトの値(value)を取得する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

セレクトボックスとは

選択肢から値を選ぶ入力部品です。会員登録の画面などでもよく見る下記の画像のようなやつです。

JavaScriptで取得するHTMLのセレクトボックスの要素

 

JavaScriptでセレクトボックスの値を取得する方法

下記の2つを行えばセレクトボックスの選択した値を取得できます。

  1. JavaScriptでHTMLのselectを取得する
  2. 取得したselectの値を参照する(選択した値になっている)

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

選択した誕生月をアラート表示してみます。HTMLで誕生月のセレクトボックスを記述し、JavaScriptで選択した値の取得とアラートの表示処理を行います。

HTMLのソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <span>誕生月</span>
    <select name="month" id="month">
      <option value="">-</option>
      <option value="1">1月</option>
      <option value="2">2月</option>
      <option value="3">3月</option>
      <option value="4">4月</option>
      <option value="5">5月</option>
      <option value="6">6月</option>
      <option value="7">7月</option>
      <option value="8">8月</option>
      <option value="9">9月</option>
      <option value="10">10月</option>
      <option value="11">11月</option>
      <option value="12">12月</option>
    </select>  
  </body>
</html>

 

JavaScriptのソース

var select = document.getElementById('selectMonth');

select.onchange = function(){
  alert(this.value);
}

 

解説

「document.getElementById」にHTMLソースのselectに指定したIDを渡すことでselectオブジェクトを取得しています。

「select.onchange」は、取得したselectオブジェクトが変更される度に呼び出されます。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。