我想创建一个有大量选项的产品订购页面。每个选项都会稍微改变价格,我希望总价在任何选项发生变化时自动更新。
所有选项都是下拉菜单,因此当他们从下拉菜单中选择一个选项时,价格需要更改。
我对一切都持开放态度,但最好在一页上写简单的代码。我希望能够将价格作为产品页面其余部分的一部分进行编辑,因为只有一种产品。
任何意见,将不胜感激。
我想创建一个有大量选项的产品订购页面。每个选项都会稍微改变价格,我希望总价在任何选项发生变化时自动更新。
所有选项都是下拉菜单,因此当他们从下拉菜单中选择一个选项时,价格需要更改。
我对一切都持开放态度,但最好在一页上写简单的代码。我希望能够将价格作为产品页面其余部分的一部分进行编辑,因为只有一种产品。
任何意见,将不胜感激。
尝试绑定一个 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);
}
如您所见,选项value
属性包括选项 ID 及其价格,用下划线分隔。这允许 Javascript 和您的表单处理代码获取所选选项及其价格。