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? — Phillip Berger, Mar 01 '13 at 11:12
It does not makes any sense, why not to use the input value? — Roko C. Buljan, Mar 01 '13 at 11:18
@roXon I can't use value because I have more than 1 value to each option. — Elijah Yang, Mar 01 '13 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, Mar 01 '13 at 11:41

score 1 · Answer 1 · edited Mar 01 '13 at 11:52

1

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 01 '13 at 11:52

Joonas

7,227
9
40
65

answered Mar 01 '13 at 11:13

Adil

146,340
25
209
204

Hi Adil, I am new to jQuery. Where do I add this line of code so that I could replace the value attribute? – Elijah Yang Mar 01 '13 at 11:45
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. – Joonas Mar 01 '13 at 11:53
Thanks @Joonas, so nice of you. – Adil Mar 01 '13 at 12:03

Felix Kling · Accepted Answer · 2013-03-01T12:10:12.780

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 01 '13 at 12:10

answered Mar 01 '13 at 12:04

Felix Kling

795,719
175
1,089
1,143

score 0 · Answer 3 · answered Oct 14 '18 at 05:43

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>

How to select the HTML5 data attribute in jQuery?

3 Answers3

Linked