重新计算更改时所有选择值的总和答案

【问题标题】：Recalculate sum of all select values on change重新计算更改时所有选择值的总和
【发布时间】：2014-09-11 17:27:56
【问题描述】：

我正在尝试在我的代码中实现 this question 的答案，但我在重新计算时遇到了问题。

我有三个动态创建的 <select> 下拉列表，它们的值从 0 到 25。我给它们一个 .select-control 类，以便我可以更轻松地访问它们。每个代码如下：

<select name="amount_1" class="form-control select-control" required>
    <option disabled selected value="">No. of Vouchers</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    ...
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
</select>

另外两个<selects>分别命名为amount_2和amount_3。

当其中一个值发生变化时，我需要重新计算所选选项的总和。这是我现在的（非工作）代码。任何朝着正确方向的推动将不胜感激。

var total = 0;
$(".select-control").change(function() {
    $(".select-control").each(function() {
        total += parseInt(this.value);
    });
    alert(total);
});

警报仅用于测试目的。一旦工作，我将简单地用总数更新一个<span> 元素。

这是jsFiddle。

编辑：回答后，这是一个有效的jsFiddle。

【问题讨论】：

标签： jquery

【解决方案1】：

那是因为您的其他选择选项没有完美的整数值。对于那些选择元素，这导致 parseInt(this.value) 到 NAN。还要在更改事件中声明 var total，因为它需要在选择元素更改时重置：

$(".select-control").change(function() {
 var total = 0;
  $(".select-control").each(function() {
      total += parseInt(this.value)||0;
  });
  alert(total);
});

Working Demo

【讨论】：

@mpdc: 很高兴它有帮助:)

【解决方案2】：

使用.val()

var total=0;
    $(".select-control").change(function() {
        $(".select-control").each(function() {
            total += parseInt($(this).val());
        });
        alert(total);
    });

【讨论】：

我的警报仍然简单地显示NaN。
要获得 val，您只需使用 $(this).val()。也将 total 初始化为 0。
但有时 $(this).val() 没有给出价值，但感谢@MilindAnantwar
total 应该在change 事件处理程序中，否则它将通过将新值添加到先前计算的总数来计算错误值

【解决方案3】：

试试这个：

 //bind change event for select box
 $(".select-control").change(function() {

    var total = parseInt($(this).val());

    $(".select-control").not(this).each(function() {
        if(parseInt($(this).val()))
        {
          total += parseInt($(this).val());
        }
    });
    alert(total);
 });

Demo

【讨论】：

【解决方案4】：

试试这个

$(".select-control").change(function() {
        var total = 0;
        $(".select-control").each(function() {
           var value = Number($(this).val());
           total += value;
        });
        alert(total);
    });

工作示例 - http://jsfiddle.net/7LvLru4L/

【讨论】：