How to use data attribute with jQuery?

Question

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
    );
});

possible duplicate of How to select the HTML5 data attribute in jQuery? — Roko C. Buljan
– 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
– Elijah Yang, Commented Mar 1, 2013 at 12:16

Arun P Johny · Accepted Answer · 2013-03-01 12:10:32Z

4

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

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

Demo: Fiddle

answered Mar 1, 2013 at 12:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

1 Comment

alex Over a year ago

hi Arun, i have tried your suggestion also with parseInt but in my case it doesn't work: jsfiddle.net/wesweatyoushop/3H3dA/31

bipen · Accepted Answer · 2013-03-01 12:16:17Z

1

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

edited Mar 1, 2013 at 12:16

answered Mar 1, 2013 at 12:10

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

Merec · Accepted Answer · 2013-03-01 12:10:15Z

0

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

answered Mar 1, 2013 at 12:10

Merec

2,7711 gold badge16 silver badges21 bronze badges

Comments

abhijit · Accepted Answer · 2013-03-01 12:11:33Z

0

You can use jquery attr

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

answered Mar 1, 2013 at 12:11

abhijit

1,9683 gold badges28 silver badges39 bronze badges

Comments

Anujith · Accepted Answer · 2013-03-01 12:16:45Z

0

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);
})

edited Mar 1, 2013 at 12:16

answered Mar 1, 2013 at 12:11

Anujith

9,3686 gold badges35 silver badges48 bronze badges

Comments

wassup · Accepted Answer · 2013-03-01 12:17:43Z

0

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.

edited Mar 1, 2013 at 12:17

answered Mar 1, 2013 at 12:11

wassup

2,5412 gold badges23 silver badges31 bronze badges

Comments

Krishnamoorthy Acharya · Accepted Answer · 2018-10-14 05:49:37Z

0

even you can get and set values based on the attribute

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

answered Oct 14, 2018 at 5:49

Krishnamoorthy Acharya

4,34440 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to use data attribute with jQuery?

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related