【初心者向け】jQueryを使ってドロップダウンリストから選択したテキストを取得する方法

2024-04-02

jQueryを使用してドロップダウンリストから選択したテキストを取得する

このチュートリアルでは、jQueryを使用してドロップダウンリスト（selectボックス）から選択されたテキストを取得する方法を解説します。

前提条件

HTMLの基本的な知識
jQueryライブラリの理解

手順

HTMLファイルに以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでドロップダウンリストから選択したテキストを取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="my-select">
    <option value="1">選択してください</option>
    <option value="2">オプション1</option>
    <option value="3">オプション2</option>
  </select>
  <p id="selected-text"></p>
  <script>
    // 選択されたテキストを取得する
    $("#my-select").change(function() {
      var selectedText = $(this).find("option:selected").text();
      // 選択されたテキストをp要素に表示
      $("#selected-text").text(selectedText);
    });
  </script>
</body>
</html>

上記のコードをブラウザで開くと、ドロップダウンリストが表示されます。
ドロップダウンリストからオプションを選択すると、選択されたテキストがp要素に表示されます。

コード解説

$("#my-select")：id属性がmy-selectであるselect要素を取得します。
.change(function())：select要素のchangeイベントが発生した時に実行される関数を指定します。
$(this).find("option:selected")：select要素内にあるselected属性を持つoption要素を取得します。
.text()：option要素のテキスト内容を取得します。
$("#selected-text").text(selectedText)：p要素のテキスト内容をselectedTextに設定します。

補足

上記のコードは、select要素内にoption要素が1つだけ選択される場合にのみ使用できます。
複数のoption要素を選択できるようにするには、$("#my-select").val()を使用します。

サンプル1：基本的な方法

<select id="my-select">
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<p id="selected-text"></p>

<script>
$(document).ready(function() {
  // 選択されたテキストを取得する
  $("#my-select").change(function() {
    var selectedText = $(this).find("option:selected").text();
    // 選択されたテキストをp要素に表示
    $("#selected-text").text(selectedText);
  });
});
</script>

サンプル2：複数のoption要素を選択できるようにする

<select id="my-select" multiple>
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<ul id="selected-texts"></ul>

<script>
$(document).ready(function() {
  // 選択されたテキストを取得する
  $("#my-select").change(function() {
    var selectedTexts = [];
    $(this).find("option:selected").each(function() {
      selectedTexts.push($(this).text());
    });
    // 選択されたテキストをul要素に表示
    $("#selected-texts").empty();
    for (var i = 0; i < selectedTexts.length; i++) {
      $("#selected-texts").append("<li>" + selectedTexts[i] + "</li>");
    }
  });
});
</script>

サンプル3：val()メソッドを使用する

<select id="my-select">
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<p id="selected-text"></p>

<script>
$(document).ready(function() {
  // 選択されたテキストを取得する
  $("#my-select").change(function() {
    var selectedText = $(this).val();
    // 選択されたテキストをp要素に表示
    $("#selected-text").text(selectedText);
  });
});
</script>

サンプル4：イベントハンドラを別の方法で記述する

<select id="my-select">
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<p id="selected-text"></p>

<script>
$(document).ready(function() {
  // 選択されたテキストを取得する
  $("#my-select").on("change", function() {
    var selectedText = $(this).find("option:selected").text();
    // 選択されたテキストをp要素に表示
    $("#selected-text").text(selectedText);
  });
});
</script>

これらのサンプルコードは、さまざまな方法でjQueryを使用してドロップダウンリストから選択したテキストを取得する方法を示しています。ニーズに合わせてコードを参考にしてください。

ドロップダウンリストから選択したテキストを取得する他の方法

JavaScriptのネイティブメソッドを使用する

以下のコードは、JavaScriptのネイティブメソッドを使用してドロップダウンリストから選択したテキストを取得する方法を示しています。

<select id="my-select">
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<p id="selected-text"></p>

<script>
// 選択されたテキストを取得する
var selectedText = document.getElementById("my-select").options[document.getElementById("my-select").selectedIndex].text;

// 選択されたテキストをp要素に表示
document.getElementById("selected-text").textContent = selectedText;
</script>

この方法は、jQueryを使用するよりも簡潔ですが、ブラウザの互換性に注意する必要があります。

DOM操作を使用する

<select id="my-select">
  <option value="1">選択してください</option>
  <option value="2">オプション1</option>
  <option value="3">オプション2</option>
</select>

<p id="selected-text"></p>

<script>
// 選択されたテキストを取得する
var selectedText = document.querySelector("#my-select option:selected").textContent;

// 選択されたテキストをp要素に表示
document.getElementById("selected-text").textContent = selectedText;
</script>