CODEWITHSUNDEEP
javascriptjquery
techiva.blogspot.com
techiva.blogspot.com

Reputation: 1190

Onchange capture data-price from the dropdown

Hi Everyone onchange I want to capture the selected data-price from the dropdown option

<select class="tmcp-field hotel support-layer-thickness tm-epo-field tmcp-select tm-valid" name="tmcp_select_10" data-price="" data-rules="" data-original-rules="" id="tmcp_select_44" tabindex="44" aria-invalid="false">
    <option value="Select Thickness_0" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" data-tm-tooltip-html="" >Select Thickness</option>
    <option value="4_1" class="tc-multiple-option tc-select-option" data-imagep="" data-price="8000" data-tm-tooltip-html="" >4</option>
    <option value="5_2" class="tc-multiple-option tc-select-option" data-imagep="" data-price="10000" data-tm-tooltip-html="" >5</option>
    <option value="6_3" class="tc-multiple-option tc-select-option" data-imagep="" data-price="12000" data-tm-tooltip-html="" >6</option>   
</select>

How can I get the data-price value

Thank You

Upvotes: 1

Views: 755

Answers (1)

Rayon
Rayon

Reputation: 36609

$('#tmcp_select_44').on('change', function() {
  var option = $(this).find('option:selected');
  console.log(option.data('price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select class="tmcp-field hotel support-layer-thickness tm-epo-field tmcp-select tm-valid" name="tmcp_select_10" data-price="" data-rules="" data-original-rules="" id="tmcp_select_44" tabindex="44" aria-invalid="false">
  <option value="Select Thickness_0" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" data-tm-tooltip-html="">Select Thickness</option>
  <option value="4_1" class="tc-multiple-option tc-select-option" data-imagep="" data-price="8000" data-tm-tooltip-html="">4</option>
  <option value="5_2" class="tc-multiple-option tc-select-option" data-imagep="" data-price="10000" data-tm-tooltip-html="">5</option>
  <option value="6_3" class="tc-multiple-option tc-select-option" data-imagep="" data-price="12000" data-tm-tooltip-html="">6</option>
</select>

Upvotes: 3

Related Questions