select要素の選択オプションを自在に操る！jQueryによる操作方法のまとめ

2024-07-02

jQueryを使ってHTMLのselect要素で選択されたオプションのインデックスを取得する方法

このチュートリアルでは、jQueryを使用してHTMLのselect要素で選択されたオプションのインデックスを取得する方法を解説します。

例

以下のHTMLコードを見てみましょう。

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

このコードでは、id="mySelect"というselect要素が定義されています。この要素には、3つのオプションが含まれています。

そして、以下のJavaScriptコードを見てみましょう。

$(document).ready(function(){
  $("#mySelect").change(function(){
    var selectedIndex = $(this).prop("selectedIndex");
    console.log(selectedIndex);
  });
});

このコードでは、#mySelect要素に対してchangeイベントハンドラが設定されています。このイベントハンドラは、select要素のオプションが変更されたときに実行されます。

イベントハンドラ内で、$(this).prop("selectedIndex")を使用して、選択されたオプションのインデックスを取得しています。このインデックスは、0から始まる整数の値です。

上記のコードを実行すると、ユーザーがselect要素でオプションを選択するたびに、選択されたオプションのインデックスがコンソールに出力されます。

ポイント

selectedIndexプロパティは、JavaScriptのネイティブプロパティです。jQueryを使用して取得することもできます。
複数選択可能なselect要素の場合、この方法は最初の選択されたオプションのインデックスのみを返します。
選択されたオプションの値を取得するには、val()メソッドを使用します。

<!DOCTYPE html>
<html>
<head>
<title>Get Selected Option Index with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#mySelect").change(function(){
    var selectedIndex = $(this).prop("selectedIndex");
    var selectedOption = $(this).find(":selected");
    var optionValue = selectedOption.val();
    console.log("Selected index: " + selectedIndex);
    console.log("Selected value: " + optionValue);
  });
});
</script>
</head>
<body>
<select id="mySelect">
  <option value="1">オプション1</option>
  <option value="2">オプション2</option>
  <option value="3">オプション3</option>
</select>
</body>
</html>

このコードの説明

HTML部分で、id="mySelect"というselect要素を定義します。
JavaScript部分で、$(document).ready(function(){})を使用して、DOMがロードされたら実行されるコードを記述します。
$("#mySelect").change(function(){})を使用して、select要素でオプションが変更されたときに実行されるイベントハンドラを定義します。
イベントハンドラ内で、以下の処理を実行します。
- var selectedIndex = $(this).prop("selectedIndex");を使用して、選択されたオプションのインデックスを取得します。
- var optionValue = selectedOption.val();を使用して、選択されたオプションの値を取得します。
取得したインデックスと値をコンソールに出力します。

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでそのHTMLファイルを開きます。

補足

このコードは、jQuery 3.6.0を使用して記述されています。
複数選択可能なselect要素の場合、このコードは最初の選択されたオプションのインデックスと値のみを返します。すべての選択されたオプションのインデックスと値を取得するには、ループ処理を使用する必要があります。

jQueryを使ってHTMLのselect要素で選択されたオプションのインデックスを取得するその他の方法

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

$(document).ready(function(){
  $("#mySelect").change(function(){
    var selectedIndex = $(this).children("option:selected").index();
    console.log(selectedIndex);
  });
});

このコードは、children("option:selected")を使用して、選択されたオプション要素を取得し、そのインデックスをindex()メソッドを使用して取得しています。

prop()メソッドとfilter()メソッドを使用する

$(document).ready(function(){
  $("#mySelect").change(function(){
    var selectedIndex = $(this).prop("selectedIndex");
    var selectedOption = $(this).children("option").filter(function(){
      return $(this).prop("selected");
    }).index();
    console.log(selectedIndex);
  });
});

このコードは、prop("selectedIndex")を使用して選択されたオプションのインデックスを取得し、children("option")を使用してすべてのオプション要素を取得して、filter()メソッドを使用して選択されたオプション要素のみを残し、そのインデックスをindex()メソッドを使用して取得しています。

$(document).ready(function(){
  $("#mySelect").change(function(){
    var selectedIndex = -1;
    $(this).children("option").each(function(i, option){
      if ($(option).prop("selected")) {
        selectedIndex = i;
        return false;
      }
    });
    console.log(selectedIndex);
  });
});

このコードは、each()メソッドを使用してすべてのオプション要素をループ処理し、prop("selected")を使用して選択されたオプション要素かどうかを確認し、選択されたオプション要素が見つかったらそのインデックスをselectedIndex変数に格納し、ループ処理を終了しています。