How to get price instead of data-price/value in Javascript?

Question

What the title says... How can I grab price="".

In my HTML below, this is in Magento, which I'm trying to override by defining a custom Javascript. That's why I did not post it to Magento Stack Overflow. The option inside select tag is like this:

<option id="sample" value="46" price="2">50 x 46cm +$2.00</option>

How can I grab the price?

$('select').on('change', function() {
  var a = $(this).data(price);
  alert( a );
});

Answer 1

You need the attribute from the selected child

$('select').on('change', function() {
      var a = $(this).find(':selected').attr('price');
      alert( a );
});

Assumes that the <select> is not set as multiple . Also more common to use html5 data- attributes but should work fine as is

Answer 2

$('select').on('change', function() {
     var selected = $( "select option:selected " ).attr('price');
     console.log(selected);
});

OR if you have

$('.sample_list').on('change', function() {
    var selected = $( ".sample_list option:selected " ).attr('price');
    console.log(selected);
});