我想创建一个包含大量选项的产品订购页面。每个选项都会稍微改变价格，我希望每当任何选项发生变化时，总价格都会自动更新。
所有选项都是下拉菜单，因此当他们从下拉列表中选择一个选项时，价格需要更改。
我对一切都持开放态度，但最好在一个页面上使用简单的代码。我希望能够将价格作为产品页面其余部分的一部分进行编辑，因为只有一个产品。
任何建议将不胜感激。
尝试绑定一个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 和表单处理代码同时获得所选选项及其价格。