Search code examples
jqueryselectsum

How to sum values of selected options?


I have 3 selectors, all selectors have some options with some values.

How do I sum all values of selected options?

<select name='anch1'>
    <option value='10'>10 ++</option>
    <option value='20'>20 ++</option>
    <option value='30'>30 ++</option>
    <option value='40'>40 ++</option>
    <option value='50'>50 ++</option>
</select>

<select name='anch2'>
    <option value='10'>10 ++</option>
    <option value='20'>20 ++</option>
    <option value='30'>30 ++</option>
    <option value='40'>40 ++</option>
    <option value='50'>50 ++</option>
</select>
    
<select name='anch3'>
    <option value='10'>10 ++</option>
    <option value='20'>20 ++</option>
    <option value='30'>30 ++</option>
    <option value='40'>40 ++</option>
    <option value='50'>50 ++</option>
</select>
    
<div>SUM OF SELECTED OPTIONS</div>

Solution

  • $('select').change(function(){
        var sum = 0;
        $('select :selected').each(function() {
            sum += Number($(this).val());
        });
         $("#sum").html(sum);
    });
    

    http://jsfiddle.net/8mnQR/1/