jQueryでセレクトボックスの変更時にデータ属性値を取得する

2024-04-02

jQueryでセレクトボックスの変更時にデータ属性値を取得する

<select id="my-select">
  <option value="1" data-value="apple">リンゴ</option>
  <option value="2" data-value="banana">バナナ</option>
  <option value="3" data-value="orange">オレンジ</option>
</select>

<script>
$(document).ready(function() {
  $('#my-select').on('change', function() {
    // 選択されたオプションのdata-value属性を取得
    const dataValue = $(this).find(':selected').data('value');
    
    // 取得した値を処理
    console.log('選択されたデータ属性値:', dataValue);
    
    // 例：選択された値に基づいて何か処理を行う
    if (dataValue === 'apple') {
      // リンゴが選択された場合の処理
    } else if (dataValue === 'banana') {
      // バナナが選択された場合の処理
    } else {
      // オレンジが選択された場合の処理
    }
  });
});
</script>

解説

HTML
jQuery
- $(document).ready(function(){})：DOMContentLoadedイベントが発生時に処理を実行
- $('#my-select').on('change', function(){}): #my-select要素のchangeイベント発生時に処理を実行
- $(this).find(':selected'): 選択されたオプション要素を取得
- .data('value'): 選択されたオプション要素のdata-value属性の値を取得
- 取得した値を処理：例では、コンソールに出力していますが、必要に応じて他の処理を行うこともできます。

ポイント

data-属性は、HTML要素に任意のデータを保存するために使用できます。
$(this)は、イベントが発生した要素自身を指します。
.find()メソッドは、要素の子孫要素を検索するために使用できます。
.data()メソッドは、要素のdata-属性の値を取得または設定するために使用できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでセレクトボックスの変更時にデータ属性値を取得する</title>
</head>
<body>
  <select id="my-select">
    <option value="1" data-value="apple">リンゴ</option>
    <option value="2" data-value="banana">バナナ</option>
    <option value="3" data-value="orange">オレンジ</option>
  </select>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#my-select').on('change', function() {
      // 選択されたオプションのdata-value属性を取得
      const dataValue = $(this).find(':selected').data('value');
      
      // 取得した値を処理
      console.log('選択されたデータ属性値:', dataValue);
      
      // 例：選択された値に基づいて何か処理を行う
      if (dataValue === 'apple') {
        // リンゴが選択された場合の処理
      } else if (dataValue === 'banana') {
        // バナナが選択された場合の処理
      } else {
        // オレンジが選択された場合の処理
      }
    });
  });
  </script>
</body>
</html>

解説

動作確認

このコードをHTMLファイルに保存し、ブラウザで開くと、セレクトボックスの値を変更するたびに、選択されたオプションのdata-value属性の値がコンソールに出力されます。

このコードはあくまでサンプルです。必要に応じて、処理内容を変更してください。
jQueryのバージョンによって、コードの書き方が異なる場合があります。

jQueryでセレクトボックスの変更時にデータ属性値を取得する他の方法

<select id="my-select">
  <option value="1" data-value="apple">リンゴ</option>
  <option value="2" data-value="banana">バナナ</option>
  <option value="3" data-value="orange">オレンジ</option>
</select>

<script>
$(document).ready(function() {
  $('#my-select').on('change', function() {
    // 選択されたオプションのdata-value属性を取得
    const dataValue = $(this).find(':selected').attr('data-value');
    
    // 取得した値を処理
    console.log('選択されたデータ属性値:', dataValue);
  });
});
</script>

<select id="my-select">
  <option value="1" data-value="apple">リンゴ</option>
  <option value="2" data-value="banana">バナナ</option>
  <option value="3" data-value="orange">オレンジ</option>
</select>

<script>
$(document).ready(function() {
  $('#my-select').on('change', function() {
    // 選択されたオプションのdata-value属性を取得
    const dataValue = $(this).find(':selected').data('value');
    
    // 取得した値を処理
    console.log('選択されたデータ属性値:', dataValue);
  });
});
</script>

.data()メソッドは、属性名を渡すことで、その属性の値を取得することができます。

.val()メソッドとdata()メソッドを組み合わせる

<select id="my-select">
  <option value="1" data-value="apple">リンゴ</option>
  <option value="2" data-value="banana">バナナ</option>
  <option value="3" data-value="orange">オレンジ</option>
</select>

<script>
$(document).ready(function() {
  $('#my-select').on('change', function() {
    // 選択されたオプションのvalue属性を取得
    const value = $(this).val();
    
    // value属性に基づいてdata-value属性を取得
    const dataValue = $(this).find('option[value="' + value + '"]').data('value');
    
    // 取得した値を処理
    console.log('選択されたデータ属性値:', dataValue);
  });
});
</script>