Question

我正在开一家带有simplecartjs的商店，这家商店有一些产品可以以不同的尺寸购买，但价格会有所增加。所以我尝试了这个，但它没有写任何东西。因此我需要根据选择将价格写入item_price范围，如果用户选择其他选择，则价格必须更改。这是我的代码：

<?php
include 'nav.php';
?>
<script type="text/javascript">
 $(".item_size").change(function(){
      if ($(this).val() == "25cm") {
            $('.item_price').append("20.00€");
      }
     if ($(this).val() == "50cm") {
            $('.item_price').append("30.00€");
      }
      if ($(this).val() == "100cm") {
            $('.item_price').append("45.00€");
      }
});
</script>
<div class="simpleCart_shelfItem">
    <h2 class="item_name">Quartz-kalvot </h2>
<p>    <select class="item_size">
        <option value="25cm"> 25cm x 30cm </option>
        <option value="50cm"> 50cm x 30xm</option>
        <option value="100cm"> 100cm x 30xm </option>
    </select><br>
    <input type="text" value="1" class="item_Quantity"><br>
    <span class="item_price"></span><br>
<a class="item_add" href="javascript:;"> Add to Cart </a></p>
</div>

<?php
include 'footer.php';
?>

Answer 1

为价格添加data属性：

<select class="item_size">
    <option data-price="20.00€" value="25cm"> 25cm x 30cm </option>
    <option data-price="30.00€" value="50cm"> 50cm x 30xm</option>
    <option data-price="45.00€" value="100cm"> 100cm x 30xm </option>
</select>

然后简单地说：

$(".item_size").change(function(){
    $('.item_price').html($('option:selected',this).data('price'));
});

Working example here

更新

要根据数量计算出价格，请使用以下内容...从数据属性中删除€符号

<select class="item_size">
    <option data-price="20.00" value="25cm"> 25cm x 30cm </option>
    <option data-price="30.00" value="50cm"> 50cm x 30xm</option>
    <option data-price="45.00" value="100cm"> 100cm x 30xm </option>
</select>

然后

$(".item_size, .item_Quantity").change(function() {
    var qty = parseInt($('.item_Quantity').val(), 10);
    var price = parseFloat($('.item_size option:selected').data('price'));
    var totalprice = qty * price;
    $('.item_price').html(totalprice.toFixed(2) + "€");
});

您会注意到我现在正在监听change和.item_size上的.item_Quantity事件 - 以确保在更改尺寸和数量时更新价格。使用parseint和parseFloat将所选值转换为number，然后进行计算（即价格*数量）以计算总价格......然后将数字显示为2小数位（toFixed()）

Working example here

Answer 2

试试这个：http://jsfiddle.net/E7Put/

当您多次选择尺寸时，附加将执行以下操作：45.00€30.00€45.00€。

jQuery写入选择字段选择的跨度

2 个答案:

更新