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

时间:2013-04-05 08:32:09

标签: javascript jquery html jquery-selectors

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

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

但它并没有像预期的那样奏效。有小费吗?感谢。

3 个答案:

答案 0 :(得分:3)

您似乎试图将对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/

答案 1 :(得分:0)

检查此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>

答案 2 :(得分: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来支持旧浏览器

继承人Fiddle