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

JavaScriptでドロップダウンリストの選択したオプションを表示する方法

JavaScriptを使ってドロップダウンリスト（セレクトボックス）で選択されたオプションを表示するには、selectedIndexプロパティとoptionsコレクションを組み合わせます。以下のコードを実行すると、ユーザーがドロップダウンリストから選択した項目を取得して画面に表示できます。

実装例

ドロップダウンリストから項目を選択し、「Click」ボタンをクリックすると、選択されたオプションのテキストが表示されます。

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <select id="selectNow">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
      <input type="button" onclick="display()" value="Click">
    </form>
    <p>Select and click the button</p>
    <script>
      function display() {
        var obj = document.getElementById("selectNow");
        document.write(obj.options[obj.selectedIndex].text);
      }
    </script>
  </body>
</html>

コードのポイント

  • document.getElementById("selectNow")：ID「selectNow」を持つ<select>要素を取得します。
  • obj.selectedIndex：現在選択されているオプションのインデックス番号（0から始まる）を返します。
  • obj.options[obj.selectedIndex].text：選択中のオプションの表示テキストを取得します。

value属性の値を取得する場合

表示テキストではなく、<option>タグのvalue属性の値を取得したい場合は、.textの代わりに.valueを使用してください。

注意点：document.write()は非推奨

document.write()はページの読み込み後に呼び出すとドキュメント全体を上書きしてしまうため、現在では非推奨とされています。実務では、以下のようにtextContentを使って特定の要素に結果を表示する方法が推奨されます。

<p>選択結果: <span id="result"></span></p>
<script>
  function display() {
    var obj = document.getElementById("selectNow");
    document.getElementById("result").textContent = obj.options[obj.selectedIndex].text;
  }
</script>
  1. JavaScriptでドロップダウン（select要素）の選択肢の数を取得する方法

    はじめにWeb開発において、ドロップダウンリスト（<select>要素）に含まれる選択肢（<option>）の数を取得したい場面はよくあります。JavaScriptとjQueryを使えば、わずか1行のコードで簡単に実現できます。例として、次のようなドロップダウンリストがあるとします。<select id=lengthListOfOptionDemo>    <option>John</option>    <option>Mike</option> &

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

    Web開発では、ドロップダウン（select要素）でユーザーが選択した値を取得して処理する場面がよくあります。本記事では、選択された値をJavaScriptのコンソールに表示する方法を、具体的なコード例とともに解説します。ドロップダウンのHTML例まず、以下のようなドロップダウン（select要素）を用意します。ここでは、onchangeイベントを使って、選択が変更されるたびに関数を呼び出す構成にしています。<select onchange=selectedSubjectName() id=subjectName>    <option>J