javascript - 使用选择选项文本更改价格

Question

我正在使用 Cart66，它在用户查看他们的购物车之前不会改变购物车的价格。我需要一种方法来更改当前商品的价格，以便用户知道价格已更改。我认为这可以使用 jquery/js 来完成，但无法弄清楚如何。

根据“cart66-select”选项文本的“()”内的值增加/减少“cart66-price-value”的价格。

<script class="cart66-select">
<option value="A">Coral</option>
<option value="B">Passion Fruit (+5.00)</option>
</script>
<strong class="cart66-price-value">$24.00</strong>

Answer 1

可以使用 jQuery 是@Aaron来完成。看一个例子

<select class="cart66-select">
    <option value="$24.00">Coral</option>
    <option value="$29.00">Passion Fruit (+5.00)</option>
</select>
<strong class="cart66-price-value">$24.00</strong>

var changePrice = function()
{
    var select = $(".cart66-select"),
        displayPrice = $(".cart66-price-value");

    select.change(function(){
        var selected = $(this).children("option:selected").val();
        displayPrice.text(selected);
    });
}

changePrice();

Answer 2

<select class="cart66-select">
    <option value="A" price="10">Coral</option>
    <option value="B" price="5">Passion Fruit (+5.00)</option>
</select>
<strong class="cart66-price-value">$<span id="price">24.00</span></strong>


<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".cart66-select").change(function(){
            var price = parseInt(jQuery(this).find(':selected').attr('price')).toFixed(2);
            jQuery("#price").html(price);
        });
    });
</script>