在多个选择中获取自定义属性值

时间:2014-12-30 19:33:11

标签: javascript jquery html

我有很多选择元素,如下所示,当选择任何选项时,我需要获得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.
});

2 个答案:

答案 0 :(得分:2)

您可以使用$.data方法,就像这样

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

演示:http://jsbin.com/letoje/1/edit?html,js,output

答案 1 :(得分:1)

你试过了吗?

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