从不同的选定下拉列表中计算值答案

【问题标题】：Calculate values from different selected dropdown从不同的选定下拉列表中计算值
【发布时间】：2021-11-09 23:15:38
【问题描述】：

如何从不同的选定下拉列表中计算价值？我不知道如何在 html 或 javascript 中显示或设置 subTotal 值。

例如，item1 将选择 2 和 1，因此对于小计，它将为 3，最后的总数将为 3。但如果它选择 1，则最后的总数将为 4。

这是我的代码

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() {
 var getAllItem1 = document.querySelectorAll(".item1");
 var subTotal1 = 0;

 getAllItem1.forEach(function(select) {
  var valueItem1 = select.options[select.selectedIndex].value;
  if (valueItem1 != 0) {
   subtotal1 += parseInt(valueItem1);
  }
 });

 document.getElementByID(".subTotal1").value = subtotal1;
}

【问题讨论】：

您的问题有一个很好且完整的答案。如果可以的话，也许你可以接受它，甚至投赞成票。

标签： javascript html jquery dropdown return-value

【解决方案1】：

这里有一些问题。您的变量subTotal1 用大写字母T 定义，但是当您稍后引用它时，它拼写为subtotal1。应该更新以匹配所有引用的位置。接下来，您使用了getElementById 方法，但将其拼写为大写D。那应该是小写。您还在选择器名称 subTotal1 前留下了 .。 ID 不需要这个。

function update() {
   var getAllItem1 = document.querySelectorAll(".item1");
   var subTotal1 = 0;

   getAllItem1.forEach(function(select) {
      var valueItem1 = select.options[select.selectedIndex].value;
      if (valueItem1 != 0) {
          subTotal1 += parseInt(valueItem1);
      }
   });

   document.getElementById("subTotal1").value = subTotal1;
}

Demo

由于您已将其标记为 jQuery，但未使用任何内容，因此我已使用它对其进行了更新：

function update() 
{
   var getAllItem1 = $(".item1");
   var subTotal1 = 0;

   $.each(getAllItem1, function(i, select) {
      var v = $(select).val();
      if (v != 0) 
      {
        subTotal1 += parseInt(v);
      }
   });

   $("#subTotal1").val(subTotal1);
}

$('select.item1').change(update)

Demo

【讨论】：