使用jQuery从选择框中获取特定属性值

Question

我有一个下拉我希望得到价格的价值，并且它已经加上已经有一个价格可用了。

<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>

我希望每当下拉值的任何值改变而不是价格attr需要添加到<P>标签的基本价格时。

此外，如果有人取消选择价值，而不是从<p>标签的基本价格减去。

我怎样才能实现这一目标？

任何帮助将是欣赏。提前致谢。

Answer 1

您可以使用J查询更改事件来检测下拉更改值。然后使用下拉列表：选中属性，您可以获得下拉列表的数据值。

$(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>

Answer 2

另一种方法是维护查找数组

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

现在您可以获得所选值

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

这将使您的html更清晰，您可以向查找对象添加更多内容。

Answer 3

price不是html属性。使用data-price。

如何选择： -

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>