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>

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

Answer 2

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

Answer 3

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>