当其中任何一个下拉菜单发生变化时，对它们的内容进行求和

Question

我在一个页面上有几个下拉列表，它们都包含一些数字。当用户更改其中任何一个时，我需要遍历所有这些数字并将所有数字相加。

我如何用jQuery做到这一点?

<select id="number1">
  <option value="1">1</option>
  <option value="3">3</option>
</select>
<select id="number2">
  <option value="1">1</option>
  <option value="3">3</option>
</select>
<select id="number4">
  <option value="1">1</option>
  <option value="3">3</option>
</select>

我试过这样做:

$('select[id*="number"].change(function() { // when any one dropdown change
    $('select[id*="number"].change(function() { // go through them all
        var current = $(this);
        // add current value to array
    });
});
$.each(arr,function() {
    total += this; // sum items
});

但是它并没有像预期的那样工作。任何建议吗?谢谢。

Answer 1

您似乎试图将对change()的调用嵌套在彼此内部。第二次不要用change()，用.each()。(此外，您在每个选择器的末尾缺少关闭')，因此您的代码根本无法工作。)

在change()处理程序之外循环数组是没有意义的，因为该代码何时实际运行?

试试这个:

$('select[id*="number"]').change(function() { // when any one dropdown change
    total = 0; // reset the total
    $('select[id*="number"]').each(function() { // go through them all
        total += +this.value; // use unary plus to convert string value for addition
    });
    // do something with total here
});

演示:http://jsfiddle.net/nnnnnn/8L9Hz/

Answer 2

看看这个。

javascript代码

  $(function(){
     $('.my_number').change(function(){
       var sum = 0;
       $('.my_number').each(function(){
          sum = sum + parseInt(this.value);
       })
     $("#result").html(sum);
  })
})

HTML代码

<select class= "my_number" id="number1">
  <option value="1">1</option>
  <option value="3">3</option>
</select>
<select class= "my_number" id="number2">
  <option value="1">1</option>
  <option value="3">3</option>
</select>
<select class= "my_number" id="number4">
  <option value="1">1</option>
  <option value="3">3</option>
</select>
<div id="result"></div>

Answer 3

另一种可能是使用Array.prototype.reduce对

的值求和

var selects = $('select[id*="number"]');
selects.change(function () { // when any one dropdown change
    var total = [].reduce.call(selects, function (l, c) {
        return l + ~~c.value
    }, 0);
    console.log(total)
});

请注意兼容性。你必须使用shim来支持旧的浏览器

这里有一个提琴