jQuery来更新价格选择时，一个或多个选项 [英] Jquery to update price when one or more options selected

问题描述

我有一家网上商店，针对产品，您可以使用不同的变量，例如:

I have an online shop and against the products you can have different variables like so:

Colour: <select class="vars" name="size">
    <option>Select an option</option>
    <option data-price="-10.00" value="B">blue</option>
    <option data-price="+20.00" value="G">green</option>
    <option data-price="+30.00" value="Y">yellow</option>
</select>
<br>
Size: <select class="vars" name="size">
    <option>Select an option</option>
    <option data-price="-1.00" value="S">Small</option>
    <option data-price="+2.00" value="M">Medium</option>
    <option data-price="+3.00" value="L">Large</option>
</select>

其中可能有1到5个，具体取决于产品.

There can be between 1 and 5 of these depending on the product.

数据价格包含页面起始价格需要发生的事情.

Data-price contains what need to happen to the start price of the page.

因此，如果起始价格为10.00，而我选择黄色，则需要将<span class="item-price">10.00</span>的价格更新为40.00

So if the start price was 10.00 and I select yellow it needs to update the price of <span class="item-price">10.00</span> to 40.00

但是如果我也选择较小，它想再次将其更新为39.

but then if I also select small it wants to update it again to 39.

我在下面的jsfiddle中工作了一半，但是我被卡在了两个部分上.使用更新范围更新价格，并且在进行更新检查时也会进行所有价格更改.

I have got it half working in the jsfiddle below but im stuck on two parts. Updating the price with the span on update and also when an update is made that it checks makes all the price changes.

希望这是有道理的.

http://jsfiddle.net/gjbKY/5/

推荐答案

要计算总价，请获取两者的价格，并在其中一个选择项上的值发生更改时将其添加到基本价格中.您可以使用html()函数在item-price范围中显示此内容.

To calculate the total price, get the value of both and add them to the base price whenever the value is changed on one of the selects. You can display this in the item-price span using the html() function.

工作演示

Working Demo

HTML

Colour: <select class="vars" name="size">
        <!-- set defaults to price=0 to save you from having to do validation -->
        <option data-price="0">Select an option</option> 
        <option data-price="-10.00" value="B">blue -10</option>
        <option data-price="20.00" value="G">green +20</option>
        <option data-price="30.00" value="Y">yello +30</option>
</select>
<br>
Size: <select class="vars" name="size">
        <option data-price="0">Select an option</option>
        <option data-price="-1.00" value="S">Small</option>
        <option data-price="2.00" value="M">Medium</option>
        <option data-price="3.00" value="L">Large</option>
</select>
<br>
<span id="item-price">20</span> <!-- better to use an ID than class, ID's are faster to look up -->

jQuery

var basePrice = 20;

$(".vars").change(function() {
    newPrice = basePrice;

    $('.vars option:selected').each(function() {
        newPrice += $(this).data('price'); //get price of each selected option and add them to the newPrice
    });

    $('#item-price').html(newPrice); //display new price
});

这篇关于jQuery来更新价格选择时，一个或多个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！