在多個選擇中獲取自定義屬性值

Question

我有很多選擇元素，如下所示，當選擇任何選項時，我需要獲取data-cal的值

  <select data-cal="89" name="caloriecalculator" style="width: 100px;">
                      <option value="100">Per 100g</option>
                      <option value="225">1 cup, mashed </option>
                      <option value="150">1 cup, sliced </option>
    </select>

    <select data-cal="109" name="caloriecalculator" style="width: 100px;">
                      <option value="100">Per 100g</option>
                      <option value="225">1 cup</option>
                      <option value="150">1 cup big</option>
    </select>

我的jQuery代碼

$('select[name="caloriecalculator"]').change(function() {
//I need to get the data atribute (data-cal) of select here.
});

Answer 1

您可以使用$ .data方法，像這樣

$('select[name="caloriecalculator"]').change(function() {
  console.log($(this).data('cal') );
});

演示： http : //jsbin.com/letoje/1/edit?html,js，輸出

Answer 2

你有沒有嘗試過：

$('select[name="caloriecalculator"]').change(function() {
    var cal = $(this).data('cal');
});

？