Get custom attribute value in multiple select

Question

I have many select elements like below , When any option is selected I need to get the value of 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>

My jquery code

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

Oleksandr T. · Accepted Answer · 2014-12-30 19:45:19Z

2

You can use $.data method, like this

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

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

edited Dec 30, 2014 at 19:45

answered Dec 30, 2014 at 19:34

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JLRishe · Accepted Answer · 2014-12-30 19:34:19Z

1

Have you tried:

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

?

answered Dec 30, 2014 at 19:34

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Collectives™ on Stack Overflow

Get custom attribute value in multiple select

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related