「自在に取得」「徹底解説」「完全網羅」

2024-04-16

jQuery で選択されたオプションからカスタム属性を取得する方法

方法1：attr()メソッドを使う

最もシンプルで分かりやすい方法は、attr()メソッドを使う方法です。

$(function() {
  $("#select_id option:selected").attr("data-custom-attr");
});

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

$(function() { ... })：jQueryのドキュメントレディイベントハンドラ。この中に記述されたコードは、ドキュメントが完全に読み込まれた後に実行されます。
$("#select_id option:selected")：IDがselect_idのselect要素内の、現在選択されているオプション要素を選択します。
.attr("data-custom-attr")：選択されたオプション要素のカスタム属性data-custom-attrの値を取得します。

例：data-custom-attrの値をコンソールに出力する

$(function() {
  const customAttrValue = $("#select_id option:selected").attr("data-custom-attr");
  console.log(customAttrValue);
});

このコードは、選択されたオプション要素のdata-custom-attr属性の値をコンソールに出力します。

方法2：prop()メソッドを使う

別の方法として、prop()メソッドを使う方法があります。prop()メソッドは、要素のプロパティを取得します。カスタム属性も要素のプロパティとして扱えるため、prop()メソッドで取得できます。

$(function() {
  $("#select_id option:selected").prop("data-custom-attr");
});

このコードは、方法1のコードとほぼ同じ動作をします。

補足

上記のコード例では、select要素のIDをselect_idとしていますが、ご自身の環境に合わせて変更してください。
カスタム属性名は、data-で始まる任意の名前を指定できます。

より複雑な処理を行う場合は、each()メソッドやfilter()メソッドなどを組み合わせて使用することができます。
jQueryの公式ドキュメントには、attr()メソッドやprop()メソッドの詳細な説明が記載されていますので、参考にしてみてください。

サンプルコード1：data-custom-attrの値をコンソールに出力する

<!DOCTYPE html>
<html>
<head>
  <title>jQuery - カスタム属性取得</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="select_id">
    <option value="1" data-custom-attr="value1">オプション1</option>
    <option value="2" data-custom-attr="value2">オプション2</option>
    <option value="3" data-custom-attr="value3">オプション3</option>
  </select>

  <script>
    $(function() {
      const customAttrValue = $("#select_id option:selected").attr("data-custom-attr");
      console.log(customAttrValue);
    });
  </script>
</body>
</html>

サンプルコード2：data-custom-attrの値を使って条件分岐を行う

<!DOCTYPE html>
<html>
<head>
  <title>jQuery - カスタム属性による条件分岐</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="select_id">
    <option value="1" data-custom-attr="category1">オプション1</option>
    <option value="2" data-custom-attr="category2">オプション2</option>
    <option value="3" data-custom-attr="category3">オプション3</option>
  </select>

  <div id="result"></div>

  <script>
    $(function() {
      const selectedOption = $("#select_id option:selected");
      const customAttrValue = selectedOption.attr("data-custom-attr");

      if (customAttrValue === "category1") {
        $("#result").text("カテゴリー1が選択されました");
      } else if (customAttrValue === "category2") {
        $("#result").text("カテゴリー2が選択されました");
      } else {
        $("#result").text("カテゴリー3が選択されました");
      }
    });
  </script>
</body>
</html>

これらのサンプルコードを参考に、ご自身のニーズに合わせてコードをカスタマイズしてください。

サンプルコードでは、jQuery 3.6.0を使用しています。古いバージョンのjQueryを使用している場合は、バージョンに合わせた変更が必要になる場合があります。

jQueryで選択されたオプションからカスタム属性を取得するその他の方法

data()メソッドは、要素に任意のデータを格納したり取得したりするために使用できます。カスタム属性も要素データとして扱えるため、data()メソッドで取得できます。

$(function() {
  const customAttrValue = $("#select_id option:selected").data("custom-attr");
  console.log(customAttrValue);
});

カスタムイベントを使用する

changeイベントに加えて、カスタムイベントを作成して、選択されたオプションが変更されたときにトリガーすることができます。このイベントハンドラ内で、カスタム属性を取得することができます。

$(function() {
  $("#select_id").on("customAttrChange", function() {
    const customAttrValue = $(this).find("option:selected").attr("data-custom-attr");
    console.log(customAttrValue);
  });

  $("#select_id").change(function() {
    $(this).trigger("customAttrChange");
  });
});

このコードは、select_idというIDを持つselect要素に対してcustomAttrChangeというカスタムイベントを作成し、changeイベントが発生したときにこのイベントをトリガーします。customAttrChangeイベントハンドラ内で、選択されたオプション要素のdata-custom-attr属性の値を取得してコンソールに出力します。