How to select the HTML5 data attribute in jQuery?

Question

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

$('#trapfabric, #trapsize').on('change', function() {
  var $selected = $('#trapfabric, #trapsize').children(":selected");
  sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
  $('#priceToSwap3').html('$' + sum
    );
});

I know I have to fit something like this in the above but I can't get it to work:

$('#priceToSwap3').text($selected.data("price"))

EDITED

My HTML:

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

<select id="trapsize" onChange="swapImage()">
 <option data-price="238">foo</option>
 <option data-price="288">foo</option>
</select>

<select id="trapfabric" onChange="swapImage()">
 <option data-price="0">foo</option>
 <option data-price="20">foo</option>
</select>

I don't see data-price anywhere in your script. Could you clarify what you mean? — user1781710
– user1781710, Commented Mar 1, 2013 at 11:12
It does not makes any sense, why not to use the input value? — Roko C. Buljan
– Roko C. Buljan, Commented Mar 1, 2013 at 11:18
@roXon I can't use value because I have more than 1 value to each option. — Elijah Yang
– Elijah Yang, Commented Mar 1, 2013 at 11:30
@FelixKling I have edited the jQuery to include $selected. Please take a look. I still can't get it to work. Thanks — Elijah Yang
– Elijah Yang, Commented Mar 1, 2013 at 11:41

Felix Kling · Accepted Answer · 2013-03-01 12:10:12Z

1

I believe this is what you want:

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

     $selected.each(function() {
         sum += $(this).data('price');
     });

     $('#priceToSwap3').html('$' + sum);
});

You have to iterate over the selected elements to get the price datum of each of them.

DEMO

edited Mar 1, 2013 at 12:10

answered Mar 1, 2013 at 12:04

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Joonas · Accepted Answer · 2013-03-01 11:52:41Z

0

You are binding event to two elements #trapsize, #trapfabric if you want to get the source element you need to use $(this);

jsfiddle

$('#trapfabric, #trapsize').on('change', function() {    
    $('#priceToSwap3').text( '$' + $(':selected', this).data("price") );
});

edited Mar 1, 2013 at 11:52

Joonas

7,3259 gold badges43 silver badges65 bronze badges

answered Mar 1, 2013 at 11:13

Adil

148k25 gold badges217 silver badges207 bronze badges

3 Comments

Elijah Yang Over a year ago

Hi Adil, I am new to jQuery. Where do I add this line of code so that I could replace the value attribute?

Joonas Over a year ago

Adil, I thought it would have been weird to make my own answer, since it's really not that different, so I edited your answer after the op gave the related html. @ElijahYang There's a jsfiddle example in the above answer now.

Adil Over a year ago

Thanks @Joonas, so nice of you.

Krishnamoorthy Acharya · Accepted Answer · 2018-10-14 05:43:21Z

We had a similar scenario wherein we assign security value(1,2,3 as security level) for each input. We have to change the security values "0" when the user logs into the system.

Eg:

<input type="text" security="3" id="super-admin" />
<input type="text" security="2" id="main-admin" />
<input type="text" security="1" id="normal-user" />

<script>
function userValidation(userType){

if(userType="super-admin"){
   $("[security=1]").attr("security", 0);
   $("[security=2]").attr("security", 0);
   $("[security=3]").attr("security", 0);
 }
if(userType="main-admin"){
  $("[security=1]").attr("security", 0);
  $("[security=2]").attr("security", 0);
 }
 if(userType="normal-user"){
   $("[security=1]").attr("security", 0);
 }
}
<script>

Collectives™ on Stack Overflow

How to select the HTML5 data attribute in jQuery?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related