My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?

HTML:

<span id="priceToSwap3"">$238</span>

<select id="trapsize">
 <option data-price="238">item1</option>
 <option data-price="288">item2</option>
</select>

<select id="trapfabric">
 <option data-price="0">item3</option>
 <option data-price="20">item4</option>
</select>

jQuery:

$('#trapfabric, #trapsize').on('change', function() {
  var $selected = $('#trapfabric, #trapsize').children(":selected");

  sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
  $('#priceToSwap3').html('$' + sum
    );
});

My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?

HTML:

<span id="priceToSwap3"">$238</span>

<select id="trapsize">
 <option data-price="238">item1</option>
 <option data-price="288">item2</option>
</select>

<select id="trapfabric">
 <option data-price="0">item3</option>
 <option data-price="20">item4</option>
</select>

jQuery:

$('#trapfabric, #trapsize').on('change', function() {
  var $selected = $('#trapfabric, #trapsize').children(":selected");

  sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
  $('#priceToSwap3').html('$' + sum
    );
});

• javascript
• jquery
• html
• select
• attributes

• 2 Or, even better, .data('price') – Matteo Tassinari Commented Mar 1, 2013 at 12:10
• 1 possible duplicate of How to select the HTML5 data attribute in jQuery? – Roko C. Buljan Commented Mar 1, 2013 at 12:13
• @roXon yes it's a duplicate because I didn't phrase my question properly in the last post and hence it was confusing. – Elijah Yang Commented Mar 1, 2013 at 12:16

7 Answers 7

To fetch the data attribute $(el).data('price')

var sum = $('#trapsize option:selected').data('price') + $('#trapfabric option:selected').data('price');

Demo: Fiddle

try this

 $('#trapsize option:selected').data('price'); 

using your code

$('#trapfabric, #trapsize').on('change', function() {
  sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
  $('#priceToSwap3').html('$' + sum); 
});

example fiddle here

$('option').attr('data-price');

You can use jquery attr

$("your dom").attr("data-price")

Try:

 $('#trapsize option:selected').data('price');  

 $('#trapfabric option:selected').data('price');

And your function should be;

$('#trapfabric, #trapsize').on('change', function() {
   sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
   $('#priceToSwap3').html('$' + sum);
})  

attr("data-price");

or

data("price");

The latter being the preferable way.

In your code it would be:

sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));

More about data() here.

even you can get and set values based on the attribute

$("[data-price=238]").attr("data-price", 0);