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

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

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

现在您可以获得所选值

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

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

Answer 2

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

如何选择： -

HTML： -

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

jquery的： -

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

$(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);
        }
    });
});

＆＃13;

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

＆＃13;

使用jQuery

3 个答案: