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和您的表单处理代码同时获取所选选项及其价格。

配置购物车价格更新

1 个答案: