如何用JavaScript实现下拉选产品后自动计算并展示总价？

问题描述 #

我需要从数据库采集的值中自动计算数据：页面上有一个产品下拉菜单，用户选择产品后，系统会自动将所选产品的price和levy填充到两个输入框中，再通过JavaScript计算这两个值的乘积，显示在第三个名为total的输入框里。

当前问题：必须手动修改其中一个输入框才能触发计算结果显示，期望实现选择产品后立即展示计算结果。

原始代码问题分析 #

当前计算总价的逻辑通过监听输入框的input事件触发，但通过JavaScript直接设置输入框的value属性时，并不会触发input事件，因此选择产品填充值后，无法自动触发计算。

解决方案 #

在下拉菜单的change事件中，填充完price和levy的值后，主动调用计算总价的函数即可。同时优化代码结构，合并重复的事件监听。

修改后的完整代码 #

HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form id="orders" action="" method="post">
  <select id="item" name="get_value">
    <option value="Guitar" data-price="2500" data-levy="25">Guitar</option>
    <option value="Drums" data-price="3500" data-levy="35">Drums</option>
    <option value="Trello" data-price="5500" data-levy="45">Trello</option>
  </select>
  <input class="first_calc" type="number" id="first_calc_1" for="1">
  <input class="second_calc" type="number" id="second_calc_1" for="1">
  <input type="text" id="total_1">
</form>

JavaScript部分

$(function() {
  const mySelect = document.getElementById("item");
  
  mySelect.addEventListener("change", function() {
    const selectedOption = this.options[this.selectedIndex];
    // 填充price和levy输入框
    document.getElementById("first_calc_1").value = selectedOption.getAttribute("data-price");
    document.getElementById("second_calc_1").value = selectedOption.getAttribute("data-levy");
    // 若有需要可在此处理data-id的赋值（需确保页面存在对应id的输入框）
    // document.getElementById("id").value = selectedOption.getAttribute("data-id");
    
    // 主动调用计算总价函数
    getTotalCost("1");
  });

  // 监听输入框手动修改事件，确保手动调整值时也能重新计算
  $("#orders").on('input', 'input.first_calc,input.second_calc', function() {
    getTotalCost($(this).attr("for"));
  });
});

function getTotalCost(ind) {
  // 转换为数字并处理空值/非数字情况，避免计算错误
  const number_1 = parseFloat(document.getElementById('first_calc_' + ind).value) || 0;
  const number_2 = parseFloat(document.getElementById('second_calc_' + ind).value) || 0;
  const total = number_1 * number_2;
  $('#total_' + ind).val(total);
}

修改说明 #

1. 将事件监听放在$(function(){})中，确保DOM元素加载完成后再绑定事件，避免找不到元素的问题。
2. 合并多个change事件监听为一个，简化代码结构。
3. 在填充输入框值后主动调用getTotalCost("1")，触发总价计算逻辑，实现选择产品后立即显示结果。
4. 在计算函数中添加parseFloat和|| 0处理，避免空值或非数字导致的计算错误。

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