JavaScriptでドロップダウンの選択値を取得する方法をわかりやすく解説

Webフォームの作成を学ぶ中で、最もよく行う作業のひとつが「ドロップダウンから値を取得する」ことです。この記事では、JavaScriptを使ってドロップダウンの値を取得する方法を、コード例とともに丁寧に解説します。

ドロップダウンHTML要素のおさらい

まずは、HTMLでドロップダウン要素を作成する方法を簡単におさらいしましょう。手順に迷ったら、Codepenのサンプルを参考にしてください。

ドロップダウンを作成するには、selectタグを使用し、その子要素としてoptionタグをネストします。select要素がドロップダウン本体を生成し、optionタグでその中に表示される選択肢を定義します。

ここでは、絵文字付きの好きな果物を選ぶドロップダウンを作ってみましょう。

<select name="fruits" id="fruits">
  <option value="">--選択してください--</option>
  <option value="avocado">アボカド🥑</option>
  <option value="watermelon">スイカ🍉</option>
  <option value="kiwi">キウイ🥝</option>
  <option value="tomato">トマト🍅</option>
</select>
<h2 id="pick"></h2>

後ほどJavaScriptで内容を書き換えるため、空のh2要素も追加しています。この時点で、ブラウザ上では次のように好きな果物を選択できます。

ここで注目したいのはvalue属性の重要性です。value属性は装飾を含まない純粋なデータを提供してくれるため、JavaScriptで扱いやすくなります。一方、optionタグ内のテキストは自由に記述できてしまうため、データとしては信頼できません。プログラムで利用するのはvalue属性の値である、と覚えておきましょう。

JavaScriptでドロップダウンの値を取得・表示する

まず、getElementByIdメソッドを使って、selectタグの要素を取得します。

const element = document.getElementById("fruits");

ドロップダウンを取得できたら、現在選択されているoptionの値を取り出せます。デフォルトでは最初のoptionが選択された状態になっています。実際に試してみましょう。

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

ここでは、select要素が持つoptions配列にアクセスし、現在選択されているインデックス（selectedIndex）を指定することで、その値（value）やテキスト（text）を取得しています。

両方の変数をconsole.logで出力してみてください。何も表示されなかったのではないでしょうか？　その理由は、最初のoptionのvalueが空（プレースホルダーとして機能しているだけ）だからです。最初のoptionをコメントアウトしてもう一度実行すると、今度はvalueとtextの両方が正しく取得できます。

JavaScriptでドロップダウンの変更を検知する

JavaScriptは、ページ上の変化に反応させるためにこそ真価を発揮します。そこで、ドロップダウンを動的に動作させてみましょう。fruit要素に対してイベントリスナー（eventListener）を登録します。

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `選択された値: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

このeventListenerによって、ドロップダウンの変更を常に監視できます。e.target.valueのように書けば、選択されたoptionの値を直接取得できる点にも注目してください。フォーム関連のチュートリアルでおなじみの書き方ですね。

これで完成です。任意の果物を選択すると、JavaScriptが変更を検知し、h2要素の内容がリアルタイムに更新されます。まさに「実り多い」学習ですね！

まとめ

ドロップダウンの値を取得するスキルは、Web開発を学ぶ上で欠かせない基本のひとつです。取得した値は、データベースの更新、ユーザーへの選択内容の表示、DOMの変化への「反応」など、さまざまな場面で活用されます。JavaScriptを使えば、こうした値は簡単かつ素早く取得できます。ぜひ本記事のコードを参考に、自分のプロジェクトでも試してみてください。