配置购物车价格更新

Question

我想创建一个包含大量选项的产品订购页面。每个选项都会稍微改变价格，我希望在任何选项发生变化时自动更新总价。

所有选项都是下拉菜单，因此当他们从下拉菜单中选择一个选项时，价格需要更改。

我对一切都持开放态度，但最好在一页上写简单的代码。我希望能够在产品页面的其余部分中编辑价格，因为只有一种产品。

任何建议将不胜感激。

Answer 1

尝试绑定一个 jQuery/javascript 函数，该函数计算所有价格输入字段的总和，并将其打印到下拉列表的底部onchange 事件，如下所示。我给你的 HTML 只是一个模型，你可以随意改变它和 jQuery 对它的引用。

HTML：

<p>Computer base price: $<span id="baseCost"></span></p>

<p>Select your upgrades:</p>
<form id="options">
    <select name="processor" onchange="calculateTotals()">
        <option value="Base_0">Base processor ($0)</option>
        <option value="Processor1_100">Processor 1 ($100)</option>
        <option value="Processor2_500">Processor 2 ($500)</option>
    </select>
    <select name="hard-drive" onchange="calculateTotals()">
        <option value="Base_0">Base hard-drive ($0)</option>
        <option value="7200rpm_250">7200rpm hard-drive ($250)</option>
    </select>
</form>

<p>Upgrade total: $<span id="upgradeCost">0</span></p><br>
<p>Final total: $<span id="sumTotal"></span></p>​

Javascript：

$(document).ready(function(){
    var basePrice = 2000;
    $("#baseCost").text(basePrice);
    $("#sumTotal").text(basePrice);
});

function calculateTotals(){
    var basePrice = parseInt($("#baseCost").text(), 10);
    var upgradePrice = 0;
    $("#options select").each(function(){
        var optionVal = $(this).val();
        upgradePrice += parseInt(optionVal.substr(optionVal.indexOf("_") + 1, optionVal.length - 1), 10);
    });
    $("#upgradeCost").text(upgradePrice);
    $("#sumTotal").text(basePrice + upgradePrice);
}​

WORKING DEMO

如您所见，选项value 属性包括选项ID 及其价格，用下划线分隔。这允许 Javascript 和您的表单处理代码同时获取所选选项及其价格。