使用jQuery计算总和无法显示总金额问题求助

核心问题 #

你的总价计算逻辑仅在页面首次加载时执行一次，此时页面上还没有.priceSelectedOption元素，所以total初始化为0后没有任何累加，导致总价一直显示0。此外，当选择空选项时，会生成无效的DOM结构，可能引发后续计算错误。

修复方案 #

1. 将总价计算逻辑封装为独立函数，每次下拉选择完成后主动调用，实时更新总价
2. 处理空选项的边界情况，清空对应输出区域，避免无效数值干扰
3. 合并重复的选择处理函数，减少代码冗余

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single" onChange="handleSelection(this, 'output-selected-option-afternoon');">
  <option></option>
  <option id="13x19namiddag" value="Namiddag|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="Namiddag|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="Namiddag|30x45 cm|32,50">30x45 cm, €32.50</option>
    <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<select id="Onderweg" name="Onderweg" data-name="Onderweg" class="js-basic-single" onChange="handleSelection(this, 'output-selected-option-commute');">
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|30x45 cm|32,50">30x45 cm, €32.50</option>
    <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
</select>

<div id="output-selections">
<div class="selected-option" id="output-selected-option-afternoon"></div>
<div class="selected-option" id="output-selected-option-commute"></div>
</div>

<h3>Total</h3>
<div class="totalPrice"></div>

CSS

.js-basic-single {
  width: 100%;
}

#output-selections {
  display: flex;
  flex-direction: column;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.selected-option {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.priceSelectedOption::before, .totalPrice::before {
    content: '€ ';
}

JavaScript

// 通用选择处理函数
function handleSelection(element, outputId) {
    const outputEl = document.getElementById(outputId);
    const selectedValue = element.options[element.selectedIndex].value;
    
    // 处理空选项，清空输出区域
    if (!selectedValue || selectedValue === 'disabled') {
        outputEl.innerHTML = '';
        updateTotal();
        return;
    }
    
    // 生成DOM结构并添加价格类
    outputEl.innerHTML = `<div>${selectedValue.split("|").join("</div><div>")}</div>`;
    outputEl.querySelector("div:last-child").classList.add("priceSelectedOption");
    
    // 更新总价
    updateTotal();
}

// 总价计算函数
function updateTotal() {
    let total = 0;
    $('.priceSelectedOption').each(function(){
        const priceText = $(this).text().replace(/,/g,'');
        const price = parseFloat(priceText);
        // 确保是有效数值才累加
        if (!isNaN(price)) {
            total += price;
        }
    });
    // 保留两位小数，符合货币格式
    $('.totalPrice').text(total.toFixed(2));
}

// 页面加载初始化
$(document).ready(function(){
    updateTotal();
});

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