1

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

我将如何使用 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
});

但它并不像预期的那样工作。有小费吗？谢谢。

4

3 回答 3

2

您似乎正在尝试将调用嵌套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/

于 2013-04-05T08:35:29.377 回答
0

检查这个小提琴。

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>
于 2013-04-05T08:43:20.327 回答
0

另一种可能性是使用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来支持较旧的浏览器

这是一个小提琴

于 2013-04-05T08:59:28.887 回答