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

检查此fiddle。

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来支持旧浏览器

继承人Fiddle

当任何一个下拉列表发生变化时，将它们的内容相加

3 个答案: