如何用HTML、PHP和JQuery实现下拉选框价格实时求和

核心思路 #

给三个目标下拉选框绑定change事件，每次选中状态变化时，获取每个选框对应选项的价格，累加后实时更新总价展示。

示例代码实现 #

HTML基础结构（适配需求）

<!-- 三个目标下拉选框 -->
<select id="Pennants_Selection">
  <option value="0">请选择</option>
  <option value="70">选项1 - $70</option>
  <option value="80">选项2 - $80</option>
</select>

<select id="Pennants_Second_Option">
  <option value="0">请选择</option>
  <option value="70">选项A - $70</option>
  <option value="90">选项B - $90</option>
</select>

<select id="Pennants_Third_Option">
  <option value="0">请选择</option>
  <option value="70">选项X - $70</option>
  <option value="60">选项Y - $60</option>
</select>

<!-- 总价展示区域 -->
<div>总价: <span id="totalPrice">$0</span></div>

JavaScript逻辑

// 获取DOM元素
const selectElements = [
  document.getElementById('Pennants_Selection'),
  document.getElementById('Pennants_Second_Option'),
  document.getElementById('Pennants_Third_Option')
];
const totalPriceEl = document.getElementById('totalPrice');

// 计算并更新总价的核心函数
function updateTotalPrice() {
  let total = 0;
  selectElements.forEach(select => {
    // 将选中值转为数字，未选择时默认0
    const price = parseInt(select.value) || 0;
    total += price;
  });
  // 更新总价显示
  totalPriceEl.textContent = `$${total}`;
}

// 给每个下拉选框绑定change事件
selectElements.forEach(select => {
  select.addEventListener('change', updateTotalPrice);
});

// 页面初始化时执行一次，确保初始状态正确
updateTotalPrice();

适配特殊场景 #

如果你的下拉选框value需要存储业务标识（而非直接存价格），可以用data-price属性存储价格，调整代码如下：

修改后的HTML选项示例

<option value="option1" data-price="70">选项1 - $70</option>

对应的JavaScript计算逻辑调整

function updateTotalPrice() {
  let total = 0;
  selectElements.forEach(select => {
    // 获取选中选项的data-price值
    const selectedOption = select.options[select.selectedIndex];
    const price = parseInt(selectedOption.dataset.price) || 0;
    total += price;
  });
  totalPriceEl.textContent = `$${total}`;
}

内容的提问来源于stack exchange，提问作者Daniel