Jquery在选择一个或多个选项时更新价格

我有一个网上商店和产品，你可以有不同的变量，如下：

Colour:  Select an option blue green yellow  
 Size:  Select an option Small Medium Large  

根据产品的不同，可能有1到5种。

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

因此，如果起始价格为10.00并且我选择黄色，则需要将10.00的价格更新为40.00

但如果我也选择小，它想再次更新到39。

我已经让它在下面的jsfiddle工作了一半，但是我坚持了两个部分。 使用更新时的跨度更新价格，以及在进行更新时更新价格会使所有价格发生变化。

希望这是有道理的。

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

Answer 1

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

工作演示

HTML

 Colour:   Select an option blue -10 green +20 yello +30  
 Size:  Select an option Small Medium Large  
 20  

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