Get specific attribute value from select box using jQuery

Question

I have one drop down i want to get value of price, and it has be plus with already one price available at up.

<p class="price">USD 200<p>

<select name="options[7]" id="select_7" class=" required-entry product-custom-option">
<option value=""></option>
<option value="13" price="15">Medium 14.5cm +USD15.00</option>
<option value="14" price="35">Large - 16.5cm +USD35.00</option>
</select>

I want whenever any value from drop down changed than price attr needs to be add to the base price at <P> tag.

Also if someone deselect value than it has be minus from base price at <p> tag.

How can i achieve that ?

Any help would be appreciate. Thanks In advance.

What you done yourself?

Pedram
– Pedram

2017-12-17 06:05:31 +00:00
Commented Dec 17, 2017 at 6:05 — Pedram
– Pedram, Commented Dec 17, 2017 at 6:05

Devesh · Accepted Answer · 2017-12-17 06:34:56Z

1

One another approach is to maintain the lookup array like

          var lookup = [];
          lookup["13"] = {price : 100 , OtherStuff : ''};

now you can get the selected value

     var selected = $("#Id").val()
     var moreDetail = lookup[selected];

This will keep you html cleaner and you can add more stuff to your lookup object.

answered Dec 17, 2017 at 6:34

Devesh

4,5501 gold badge20 silver badges28 bronze badges

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

Comments

Paaarth · Accepted Answer · 2017-12-17 06:54:12Z

You can use J query change event to detect drop-down change value. then using drop-down:selected attribute you can get data value of drop-down.

$(document).ready(function() {
    $('#select_7').on("change", function() {
        if ($("#select_7 option:selected").attr('value') == "") {
            $('.price').text("USD");
            $('.price2').text("USD " + parseInt(200));
        } else {
            var dataid = $("#select_7 option:selected").attr('price');
            
            $('.price').text("USD " + dataid);
            var dataPrice = 200 + parseInt(dataid);
            $('.price2').text("USD " + dataPrice);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="price">USD 200<p>
<p class="price2">USD 200<p>
   <select name="options[7]" id="select_7" class="required-entry product-custom-option">
      <option value="">Select Size</option>
      <option value="13" price="15">Medium 14.5cm +USD15.00</option>
      <option value="14" price="35">Large - 16.5cm +USD35.00</option>
   </select>

Ramesh Kithsiri HettiArachchi · Accepted Answer · 2017-12-17 06:35:14Z

0

price is not a html attribute. use data-price.

how to select:-

html:-

<option vaue="13" data-price="15"></option>

jquery:-

var price = $('option[value="13"]').data('price');
//price = 15

$(document).ready(function(){
$('.required-entry').bind('change',function(){
  $('.price').html('USD '+$('.required-entry option[value="'+$('.required-entry').val()+'"]').data('price'));
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="price"><p>

<select name="options[7]" id="select_7" class="required-entry product-custom-option">
<option value=""></option>
<option value="13" data-price="15">Medium 14.5cm +USD15.00</option>
<option value="14" data-price="35">Large - 16.5cm +USD35.00</option>
</select>

edited Dec 17, 2017 at 6:35

answered Dec 17, 2017 at 6:07

Ramesh Kithsiri HettiArachchi

1,54014 silver badges36 bronze badges

Collectives™ on Stack Overflow

Get specific attribute value from select box using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related