HTML Selectオプションの選択状況を把握する：jQueryの便利なセレクタとメソッド

2024-06-30

jQuery で HTML Select オプションの選択状態を確認する方法

:selected セレクタを使う

最も基本的な方法は、:selected セレクタを利用する方法です。これは、現在選択されているオプションのみを抽出する特殊なセレクタです。以下に例を示します。

// 選択されているオプションの値を取得
var selectedValue = $("#mySelect option:selected").val();
console.log(selectedValue); // 例: "option2"

// 選択されているオプションのテキストを取得
var selectedText = $("#mySelect option:selected").text();
console.log(selectedText); // 例: "オプション 2"

val() メソッドを使う

もう一つの方法は、val() メソッドを使う方法です。これは、Select要素の現在選択されているオプションの値を取得します。複数選択が可能な multiple 属性が設定されている場合は、配列として値が返されます。以下に例を示します。

// 選択されているオプションの値を取得
var selectedValue = $("#mySelect").val();
console.log(selectedValue); // 例: "option2"

// 複数選択の場合、選択されたすべてのオプションの値を取得
var selectedValues = $("#mySelect").val();
console.log(selectedValues); // 例: ["option2", "option3"]

応用例

上記の方法を使って、様々な処理を行うことができます。例えば、以下のようなことができます。

選択されたオプションに応じて、別の要素の内容を変更する
フォーム送信時に、選択されたオプションの値をデータとして送信する
選択されたオプションに基づいて、非同期処理を実行する

補足

上記の例では、$("#mySelect") のような ID セレクタを使用していますが、他のセレクタでも同様に利用できます。
複数の Select要素を扱う場合は、それぞれにユニークな ID を設定する必要があります。
change イベントを使用して、オプションが選択されたときに処理を実行することもできます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Option 例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 選択されたオプションが変更されたときに処理を実行
      $("#mySelect").change(function() {
        // 選択されたオプションの値を取得
        var selectedValue = $(this).val();

        // 選択された値に応じて、アラートを表示
        if (selectedValue === "option1") {
          alert("オプション 1が選択されました");
        } else if (selectedValue === "option2") {
          alert("オプション 2が選択されました");
        } else {
          alert("その他のオプションが選択されました");
        }
      });
    });
  </script>
</head>
<body>
  <select id="mySelect">
    <option value="option1">オプション 1</option>
    <option value="option2">オプション 2</option>
    <option value="option3">オプション 3</option>
  </select>
</body>
</html>

説明

このコードは以下の処理を実行します。

$(document).ready(function() {...}) 内のコードは、DOMが完全にロードされた後に実行されます。
$("#mySelect").change(function() {...}) は、mySelect IDを持つSelect要素の change イベントにリスナーを追加します。
イベントハンドラ内では、$(this).val() を使って、選択されたオプションの値を取得します。
if-else ステートメントを使用して、選択された値に応じてアラートを表示します。

このサンプルコードは、基本的な使い方を示しています。実際の状況に合わせて、自由に改造してご利用ください。

以下に、いくつかの応用例を示します。

$("#mySelect").change(function() {
  var selectedValue = $(this).val();
  if (selectedValue === "option1") {
    $("#myContent").html("オプション 1の内容");
  } else if (selectedValue === "option2") {
    $("#myContent").html("オプション 2の内容");
  } else {
    $("#myContent").html("その他のオプションの内容");
  }
});

$("#myForm").submit(function() {
  var selectedValue = $("#mySelect").val();
  $("#myHiddenInput").val(selectedValue);
  return true;
});

非同期処理を実行する

$("#mySelect").change(function() {
  var selectedValue = $(this).val();
  $.ajax({
    url: "my_api.php",
    data: { selectedValue: selectedValue },
    success: function(data) {
      // 非同期処理で取得したデータを処理
      console.log(data);
    }
  });
});

これらの例は、ほんの一例です。 jQueryとSelect要素を組み合わせることで、様々な処理を実現することができます。

jQuery で HTML Select オプションの選択状態を確認するその他の方法

prop() メソッドは、要素のプロパティを取得するために使用できます。 selected プロパティは、オプションが選択されているかどうかを示すブール値を返します。以下に例を示します。

// 選択されているオプションの値を取得
var selectedValue = $("#mySelect option:selected").prop("value");
console.log(selectedValue); // 例: "option2"

// 選択されているオプションのテキストを取得
var selectedText = $("#mySelect option:selected").prop("text");
console.log(selectedText); // 例: "オプション 2"

利点:

:selected セレクタよりも簡潔なコードで書ける

jQuery 1.6 以降でのみ使用可能

each() メソッドは、jQuery オブジェクト内のすべての要素に対して処理を実行するために使用できます。以下に例を示します。

$("#mySelect option").each(function() {
  if ($(this).prop("selected")) {
    // 選択されているオプションの値を取得
    var selectedValue = $(this).prop("value");
    console.log(selectedValue); // 例: "option2"

    // 選択されているオプションのテキストを取得
    var selectedText = $(this).prop("text");
    console.log(selectedText); // 例: "オプション 2"
  }
});