如何计算多个下拉框选中值并在HTML与JS中展示subTotal及总金额

原有代码错误修正点 #

• 变量名大小写不统一：声明subTotal1但累加时误用小写subtotal1，JavaScript严格区分大小写
• getElementById方法拼写错误，且传入参数不应该带类选择器前缀.，直接填写目标元素的id值即可
• 缺失item2分类的小计计算逻辑，以及最终总金额的汇总逻辑
• 原有HTML存在标签未闭合问题，已同步修复

修正后完整代码 #

HTML代码 #

<div class="class1">
 <div class= "row">
  <div class= "col">
   <select class= "item1" onchange="update()">
    <option name ="option" value="0">0</option>
    <option name ="option" value="1">1</option>
    <option name ="option" value="2">2</option>
   </select>
  </div> 
 </div>

 <div class= "row">
  <div class= "col">
   <select class= "item1" onchange="update()">
    <option name ="option" value="0">0</option>
    <option name ="option" value="1">1</option>
    <option name ="option" value="2">2</option>
   </select>
  </div> 
 </div>

  <div class= "col">
   <input name="subTotal1" id="subTotal1" type="text" readonly>
  </div>


 <div class= "row">
  <div class= "col">
   <select class= "item2" onchange="update()">
    <option name ="option" value="0">0</option>
    <option name ="option" value="1">1</option>
    <option name ="option" value="2">2</option>
   </select>
  </div> 
 </div>

  <div class= "col">
   <input name="subTotal2" id="subTotal2" type="text" readonly>
  </div>

   <div class= "col">
   <input name="total" id="total" type="text" readonly>
  </div>
</div>

JavaScript代码 #

function update() {
  // 计算item1分类小计
  const getAllItem1 = document.querySelectorAll(".item1");
  let subTotal1 = 0;
  getAllItem1.forEach(select => {
    subTotal1 += parseInt(select.value);
  });
  document.getElementById("subTotal1").value = subTotal1;

  // 计算item2分类小计
  const getAllItem2 = document.querySelectorAll(".item2");
  let subTotal2 = 0;
  getAllItem2.forEach(select => {
    subTotal2 += parseInt(select.value);
  });
  document.getElementById("subTotal2").value = subTotal2;

  // 计算总金额
  const total = subTotal1 + subTotal2;
  document.getElementById("total").value = total;
}

实现逻辑说明 #

每次任意下拉框选中值变化时触发update函数，函数会分别统计所有item1类下拉框的选中值之和赋值给subTotal1，统计所有item2类下拉框的选中值之和赋值给subTotal2，最后将两个小计相加得到总金额赋值给total输入框，完全符合你给出的示例计算规则。

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