jQuery來更新價格，當一個或多個選項中選擇

Question

我有一個在線商店，對你的產品可以有不同的變量，像這樣：

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間取決於產品。

數據價格包含需要發生的頁面起始價格。

因此，如果啓動價格爲10.00和我選擇黃色，它需要的<span class="item-price">10.00</span>價格更新爲40.00

但隨後如果我還選擇了小就是了更新一遍，以39

我已經在下面的jsfiddle中工作了一半，但我被困在兩個部分。用更新時的跨度更新價格，並且在更新時檢查價格更改。

希望這是有道理的。

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

Answer 1

要計算總價，同時獲得的值，並將它們添加到每當值在選擇的一個改變了基準價格。您可以使用html()函數在item-price範圍內顯示。

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