JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

ドロップダウン（select要素）で選択された値をJavaScriptのコンソールに表示する方法

Web開発では、ドロップダウン（select要素）でユーザーが選択した値を取得して処理する場面がよくあります。本記事では、選択された値をJavaScriptのコンソールに表示する方法を、具体的なコード例とともに解説します。

ドロップダウンのHTML例

まず、以下のようなドロップダウン（select要素）を用意します。ここでは、onchangeイベントを使って、選択が変更されるたびに関数を呼び出す構成にしています。

<select onchange="selectedSubjectName()" id="subjectName">
   <option>Javascript</option>
   <option>MySQL</option>
   <option>MongoDB</option>
   <option>Java</option>
</select>

選択値をコンソールに表示するコード例

次に、選択された値をコンソールに表示する完全なコード例を見てみましょう。

コード全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select onchange="selectedSubjectName()" id="subjectName">
<option>Javascript</option>
<option>MySQL</option>
<option>MongoDB</option>
<option>Java</option>
</select>
<script>
   function selectedSubjectName() {
      var subjectIdNode = document.getElementById('subjectName');
      var value = subjectIdNode.options[subjectIdNode.selectedIndex].text;
      console.log("選択された値＝" + value);
   }
</script>
</body>
</html>

コードのポイント解説

このコードの動作のポイントは以下の通りです。

  • document.getElementById() で id="subjectName" の select 要素を取得します。
  • selectedIndex プロパティは、現在選択されている option のインデックス番号（0から始まる）を返します。
  • options[selectedIndex].text により、選択中の option の表示テキストを取得できます。値（value属性）ではなくテキストを取りたい場合に便利です。
  • 取得した値を console.log() でコンソールに出力します。

なお、value属性が設定されている場合は subjectIdNode.value を使うことで、よりシンプルに選択値を取得することも可能です。

プログラムの実行方法

上記のコードを「index.html」などのファイル名で保存し、VS Codeを使用している場合はファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上で簡単に実行・確認できます。

実行結果

プログラムを実行すると、ブラウザにはドロップダウンが表示されます。

例えば「Java」を選択すると、開発者ツールのコンソールには次のように出力されます。

選択された値＝Java

続けて「MongoDB」を選択し直すと、コンソールの出力も自動的に更新されます。

選択された値＝MongoDB

このように、onchangeイベントと selectedIndex を組み合わせることで、ドロップダウンで選択された値をリアルタイムに取得できることが確認できました。

まとめ

ドロップダウンの選択値を取得する基本の手順は次の3ステップです。

  1. getElementById() で select 要素を取得する
  2. selectedIndex で選択中の option の位置を特定する
  3. .text（または .value）で選択値を取り出す

この手法はフォームのバリデーションや動的な画面更新など、さまざまな場面で応用できるので、ぜひマスターしておきましょう。

  1. JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド

    Web開発では、アンカータグ(<a>)に設定されたリンク先URL、つまりhref属性の値を取得したい場面がよくあります。この記事では、jQueryのattr()メソッドを使って、簡単にhrefの値を取得する方法を解説します。対象となるHTMLの例たとえば、以下のようなアンカータグがあったとします。<a class=demo title=get the url href=./mainPage.jsp/1245>href value at console</a>ここで必要なのは、テキスト部分ではなく、URLそのもの、すなわちhref属性の値「./mainPage

  2. CSSのappearanceプロパティでセレクトボックスのドロップダウン矢印を非表示にする方法

    CSSのappearanceプロパティを使うと、要素をユーザーのOSが持つプラットフォームネイティブなスタイルに合わせて表示できます。このプロパティをnoneに設定することで、ブラウザがデフォルトで表示するUI部品（ドロップダウン矢印やスピンボタンなど）を非表示にすることが可能です。appearanceプロパティの構文CSSのappearanceプロパティは、以下のように記述します。Selector {     appearance: /*値*/;     -webkit-appearance: /*値*/; /*