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

时间:2014-09-11 08:57:44

标签: jquery

我正在尝试在我的代码中实现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_2amount_3

当其中一个值发生变化时,我需要重新计算所选选项的总和。这是我现在的(非工作)代码。任何正确方向的推动都将受到赞赏。

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

警报仅用于测试目的。一旦工作,我只需使用总数更新<span>元素。

这是jsFiddle

编辑:在回答之后,这是一个有效的jsFiddle

4 个答案:

答案 0 :(得分:1)

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

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

<强> Working Demo

答案 1 :(得分:0)

使用.val()

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

答案 2 :(得分:0)

试试这个:

 //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

答案 3 :(得分:0)

试试这个

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

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