I'm trying to return the sum of values ​​every time one of the select is changed. But the sum is always wrong:

$('select').change(function () {
 a = 0;
 $('select').each(function () {
    a += parseInt($('option:selected').val(), 10);
 });
 $('h1 span').html(a);
});

/

I'm trying to return the sum of values ​​every time one of the select is changed. But the sum is always wrong:

$('select').change(function () {
 a = 0;
 $('select').each(function () {
    a += parseInt($('option:selected').val(), 10);
 });
 $('h1 span').html(a);
});

http://jsfiddle/vAu3E/

• javascript
• jquery
• each

• var sum = $("select option:selected").toArray().reduce(function(sum, val) { return sum+val; }, 0); – cookie monster Commented Jun 20, 2014 at 15:24

6 Answers 6

$('select').change(function () {
    var a = 0;
    $('select').each(function () {
        a += parseInt(this[this.selectedIndex].value, 10);
    });
    $('h1 span').html(a);
});

JSFiddle

Use this.value (faster than re-getting a jQuery object when you already have it) and declare a so it's not global (I also invoked the handler immediately so your result shows immediately):

$('select').change(function () {
    var a = 0;
    $('select').each(function () {
         a += parseInt(this[this.selectedIndex].value, 10); //originally this.value
    });
    $('h1 span').html(a);
}).change();

http://jsfiddle/vAu3E/10/

See ments for potential issues with this.value in versions of IE

Using sum plugin , you will have :

$('select').change(function () {
    $('h1 span').html($('option:selected').sum());
});

FIDDLE : http://jsfiddle/abdennour/vAu3E/18/

NOTE

You use val method since your element is option tag. But , If It is a sum of DIV content elements for example , You must use html method instead of val :

So , the sum plugin still useful :

   $('div.operators').sum('html');

I suggest this:

$("select").on("change", function(){
    var a = 0;
    $("select").each(function(){
        a += parseInt($(this).val());
    });
    $('h1 span').html(a);
});

fiddle

Obviously the result is correct, because you have to substitute "option:selected" with this:

a += parseInt($(this).val(), 10);

If you put "option:selected" the selector is the first selector, instead with $(this) you get the value of each select...

Hope that this ment help you... Bye

There's an alternative to parseInt; prepending a + will convert a 'numeric` string into a number:

$('select').change(function () {
    var a = 0;
    $('select').each(function () {
        a += +this.value;
    });
    $('h1 span').html(a);
});

WORKING JSFIDDLE DEMO