その他の方法：this.options[this.selectedIndex] と $(this).prop('value') を使う

2024-04-28

jQuery で select 要素の change イベントを使って選択されたオプションを取得する方法

このチュートリアルでは、jQuery を使って select 要素の change イベントを処理し、選択されたオプションの値を取得する方法を解説します。

必要なもの

jQuery ライブラリをプロジェクトにインストールしていること
HTML ドキュメント内に select 要素があること

手順

select 要素に change イベントハンドラーをアタッチします。
イベントハンドラー内で、$(':selected') セレクターを使って選択されたオプションを取得します。
選択されたオプションの値を取得するには、val() メソッドを使用します。

例

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

<script>
  $(document).ready(function() {
    $('#mySelect').change(function() {
      var selectedOption = $(this).find(':selected');
      var selectedValue = selectedOption.val();

      console.log('選択されたオプションの値:', selectedValue);
    });
  });
</script>

この例では、mySelect という ID を持つ select 要素に対して change イベントハンドラーをアタッチしています。イベントハンドラー内では、$(':selected') セレクターを使って選択されたオプションを取得し、そのオプションの val() メソッドを使って値を取得しています。

オプション

text() メソッドを使って、選択されたオプションのテキストを取得することもできます。

以下のコードは、select 要素の change イベントを使って選択されたオプションの値とテキストを取得し、それをアラートダイアログで表示するものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Change Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').change(function() {
        var selectedOption = $(this).find(':selected');
        var selectedValue = selectedOption.val();
        var selectedText = selectedOption.text();

        alert('選択されたオプション:\n' +
              '  値: ' + selectedValue + '\n' +
              '  テキスト: ' + selectedText);
      });
    });
  </script>
</head>
<body>
  <label for="mySelect">オプションを選択してください:</label>
  <select id="mySelect">
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>
</body>
</html>

このコードは以下の動作をします。

$(document).ready(function() {...}); : DOM が完全にロードされたら、その中のコードを実行します。
$('#mySelect').change(function() {...}); : mySelect ID を持つ select 要素に change イベントハンドラーをアタッチします。
var selectedOption = $(this).find(':selected'); : イベントハンドラー内で、$(this) で現在の select 要素を取得し、find(':selected') セレクターを使って選択されたオプションを取得します。
var selectedValue = selectedOption.val(); : 選択されたオプションの値を取得します。
alert('選択されたオプション:\n' + ...); : アラートダイアログで、選択されたオプションの値とテキストを表示します。

このサンプルコードを参考に、自分のニーズに合わせてコードをカスタマイズすることができます。

以下のコードは、選択されたオプションの値に基づいて、別の要素の内容を変更する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Change Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').change(function() {
        var selectedValue = $(this).val();
        $('#myContent').text('選択されたオプション: ' + selectedValue);
      });
    });
  </script>
</head>
<body>
  <label for="mySelect">オプションを選択してください:</label>
  <select id="mySelect">
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>

  <p id="myContent"></p>
</body>
</html>

$('#myContent').text('選択されたオプション: ' + selectedValue); : myContent ID を持つ要素のテキストコンテンツを、選択されたオプションの値に設定します。

この例のように、jQuery で select 要素の change イベントを使って、さまざまな操作を実行することができます。

jQuery で select 要素の change イベントを使って選択されたオプションを取得するその他の方法

前述の例では、$(':selected') セレクターを使って選択されたオプションを取得していましたが、他にもいくつか方法があります。

this.options[this.selectedIndex] を使用する

以下のコードは、this.options[this.selectedIndex] プロパティを使って、選択されたオプションの値を取得する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Change Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').change(function() {
        var selectedValue = this.options[this.selectedIndex].value;
        alert('選択されたオプションの値: ' + selectedValue);
      });
    });
  </script>
</head>
<body>
  <label for="mySelect">オプションを選択してください:</label>
  <select id="mySelect">
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>
</body>
</html>

var selectedValue = this.options[this.selectedIndex].value; : this キーワードを使って現在の select 要素を取得し、options プロパティでオプションの配列を取得します。selectedIndex プロパティは、選択されているオプションのインデックスを取得します。そして、そのインデックスを使って、選択されたオプションの value プロパティから値を取得します。

$(this).prop('value') を使用する

以下のコードは、$(this).prop('value') メソッドを使って、選択されたオプションの値を取得する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Change Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').change(function() {
        var selectedValue = $(this).prop('value');
        alert('選択されたオプションの値: ' + selectedValue);
      });
    });
  </script>
</head>
<body>
  <label for="mySelect">オプションを選択してください:</label>
  <select id="mySelect">
    <option value="1">オプション 1</option>
    <option value="2">オプション 2</option>
    <option value="3">オプション 3</option>
  </select>
</body>
</html>

var selectedValue = $(this).prop('value'); : this キーワードを使って現在の select 要素を取得し、prop('value') メソッドを使って、選択されたオプションの値を取得します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Select Change Event Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#mySelect').