jQueryでドロップダウンリストから選択されたオプションを取得する方法

2024-04-02

jQueryでドロップダウンリストから選択されたオプションを取得する方法

前提条件

このチュートリアルを理解するには、以下の知識が必要です。

HTMLとCSSの基礎
JavaScriptの基本
jQueryの基本

使用例

以下のコードは、select要素から選択されたオプションのテキストと値を取得する方法を示しています。

HTML:

<select id="my-select">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>

// 1. `val()`メソッドを使用する

$(function() {
  var selectedValue = $("#my-select").val();
  console.log("選択されたオプションの値:", selectedValue);

  // 選択されたオプションのテキストを取得
  var selectedText = $("#my-select option:selected").text();
  console.log("選択されたオプションのテキスト:", selectedText);
});

方法の詳細

val()メソッドを使用する

val()メソッドは、select要素から選択されたオプションの値を取得するために使用されます。

例:

var selectedValue = $("#my-select").val();
console.log("選択されたオプションの値:", selectedValue);

:selectedセレクターは、select要素内で選択されているオプションを選択するために使用されます。

var selectedText = $("#my-select option:selected").text();
console.log("選択されたオプションのテキスト:", selectedText);

changeイベントは、select要素の選択が変更されたときに発生します。

$("#my-select").change(function() {
  var selectedValue = $(this).val();
  console.log("選択されたオプションの値:", selectedValue);

  // 選択されたオプションのテキストを取得
  var selectedText = $(this).find("option:selected").text();
  console.log("選択されたオプションのテキスト:", selectedText);
});

このチュートリアルでは、jQueryを使用してドロップダウンリストから選択されたオプションを取得する方法を3つの異なる方法で解説しました。

値のみが必要な場合は、val()メソッドを使用するのが最も簡単です。
テキストと値の両方が必要な場合は、:selectedセレクターを使用するのが良いでしょう。
選択が変更されたときに処理を実行したい場合は、changeイベントを使用する必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryでドロップダウンリストから選択されたオプションを取得するサンプル</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h1>ドロップダウンリストから選択されたオプションを取得</h1>
  <p>以下のサンプルコードは、jQueryを使用してドロップダウンリストから選択されたオプションを取得する方法を3つの異なる方法で示しています。</p>
  <select id="my-select">
    <option value="1">オプション1</option>
    <option value="2">オプション2</option>
    <option value="3">オプション3</option>
  </select>
  <p id="selected-value"></p>
  <p id="selected-text"></p>
  <script>
  // 1. `val()`メソッドを使用する
  $(function() {
    var selectedValue = $("#my-select").val();
    $("#selected-value").text("選択されたオプションの値: " + selectedValue);

    // 選択されたオプションのテキストを取得
    var selectedText = $("#my-select option:selected").text();
    $("#selected-text").text("選択されたオプションのテキスト: " + selectedText);
  });

  // 2. `:selected`セレクターを使用する
  $(function() {
    var selectedText = $("#my-select option:selected").text();
    $("#selected-text").text("選択されたオプションのテキスト: " + selectedText);
  });

  // 3. `change`イベントを使用する
  $(function() {
    $("#my-select").change(function() {
      var selectedValue = $(this).val();
      $("#selected-value").text("選択されたオプションの値: " + selectedValue);

      // 選択されたオプションのテキストを取得
      var selectedText = $(this).find("option:selected").text();
      $("#selected-text").text("選択されたオプションのテキスト: " + selectedText);
    });
  });
  </script>
</body>
</html>

実行方法:

上記のコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。
ドロップダウンリストからオプションを選択します。
選択されたオプションの値とテキストがページに表示されます。

:selectedセレクターを使用する:

changeイベントを使用する:

その他の方法:

上記で紹介した3つの方法以外にも、jQueryを使用してドロップダウンリストから選択されたオプションを取得する方法があります。

find()メソッド
data()メソッド

jQueryでドロップダウンリストから選択されたオプションを取得する他の方法

find()メソッドは、指定された要素の子孫要素を検索するために使用されます。

var selectedOption = $("#my-select").find("option:selected");
var selectedValue = selectedOption.val();
var selectedText = selectedOption.text();

var selectedIndex = $("#my-select option:selected").index();
var selectedValue = $("#my-select option").eq(selectedIndex).val();
var selectedText = $("#my-select option").eq(selectedIndex).text();

data()メソッドは、要素に関連付けられたデータを取得するために使用されます。

$("#my-select option").each(function() {
  $(this).data("value", $(this).val());
  $(this).data("text", $(this).text());
});

var selectedValue = $("#my-select option:selected").data("value");
var selectedText = $("#my-select option:selected").data("text");