javascript - Jquery Add (SUM) 来自多个表单元素的多个值

Question

这是我的表格...

<form>
  <label>Fisrt:</label>
  <select class="first">
    <option value="0">United</option>
    <option value="1">Indi</option>
    <option value="2">Kingdom</option>
  </select>
  <label>Second:</label>
  <select class="second">
    <option value="0">States</option>
    <option value="1">orange</option>
    <option value="2">apple</option>
  </select>

  <input type="text" class="form-control trScr" id="temp" name="temp">
  <input type="text" class="form-control trScr" id="bc" name="bc">

</form>

<div id="total">Total: </div>

如上所示，我想为使用输入框插入的值选择的下拉列表添加数值。我如何计算并显示 div id=total 上的结果？

示例..如果我从下拉列表中选择united(0值)和orange(1值)，并且如果我分别插入第一个和第二个输入框(4,2)!我希望结果为 0 + 1 + 4 + 2 = 7。如何使用 Jquery 进行计算？如果不是Js？

我的尝试... 函数calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".trScr").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
      console.log(sum);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    return sum.toFixed(0);
  }

上面完美地显示了文本框的总和，我真正的问题是如何使用上面的代码添加选择？

Answer 1

这是我的解决方案:

$('#fm').on('input', function(e){
    let total = Number($('.first').val()) + 
                Number($('.second').val()) + 
                Number($('#temp').val()) + 
                Number($('#bc').val());
    $('#total').text(total);
});

fiddle :- https://jsfiddle.net/wr6ympos/3/