jQuery create array of input options and add them together

Question

I got some select inputs where I need to create an array of their current selected val. I then need to get these values added together.

My HTML:

<select class="selectName" name="Select options" id="options1">
    <option value="5.0000">10x4</option>
    <option value="20.0000">10x8</option>
</select>

<select class="selectName" name="Select options" id="options2">
    <option value="5.0000">10x4</option>
    <option value="20.0000">10x8</option>
</select>

So far, I can get the current option:selected value by doing:

optionsTotal = $.map($(".selectName").find('option:selected'), function (el, i) {
   return $(el).val();
});

How can I add these values together to get a total? I just want the selected options total.

Here is a fiddle: http://jsfiddle.net/vdecree/e9zxY/34/

possible duplicate of [Sum of values in an array using jQuery](http://stackoverflow.com/questions/8550183/sum-of-values-in-an-array-using-jquery) — Ram, Apr 09 '14 at 14:33
Yeh that was my bad when i wrote the question, my actual site doesn't have duplicates! — Gerico, Apr 09 '14 at 14:40

score 0 · Answer 1 · answered Apr 09 '14 at 14:26

0

I think you need this:

var optionsTotal = 0;
$(".selectName > option:selected").each(function(){
    optionsTotal += Number($(this).val());
});

BTW, you can't have duplicate IDs.

answered Apr 09 '14 at 14:26

Amit Joki

58,320
7
77
95

score 0 · Accepted Answer · answered Apr 09 '14 at 14:29

function getOptionsPrice() {

var optionsTotal = null;

function init() {
    $(".selectName").on('change', function() {

        optionsTotal = new Number(0);
        $.map($(".selectName").find('option:selected'), function (el, i) {
            var v = new Number( $(el).val());
            optionsTotal += v;
        });

        $(".result").text(optionsTotal);

    }).change();
}

  init();
  return optionsTotal;
}

getOptionsPrice();

score 0 · Answer 3 · answered Apr 09 '14 at 14:36

Use parseFloat() inside $.map() and use clouser for optionsTotal function getOptionsPrice() { var optionsTotal = 0;

function init() {
    $(".selectName").on('change', function() {
        optionsTotal = 0;
        $.map($(".selectName").find('option:selected'), function (el, i) {
            optionsTotal += parseFloat($(el).val());
        });

        $(".result").text(optionsTotal);

    }).change();
}

init();
return optionsTotal;
}

getOptionsPrice();

Here is DEMO

score 0 · Answer 4 · answered Apr 09 '14 at 14:38

Define a variable to hold the total and using $map() iterate through the dropdowns with selected options added upon that total variable as in:

var sum=0;
 $.map( $('.selectName').find('option:selected'),
                          function(el){
                        sum += parseFloat($(el).val());
     });

     console.log(sum);

score 0 · Answer 5 · answered Apr 09 '14 at 14:41

function getOptionsPrice() {

function init() {
    $(".selectName").on('change', function() {
        var optionsTotal = 0.0;
        $.map($(".selectName").find('option:selected'), function (el, i) {

            optionsTotal += Number($(el).val());
            return optionsTotal;
        });
        $(".result").text(optionsTotal);

    }).change();
}

init();
return optionsTotal;

}

getOptionsPrice();

Working JSFiddle... Check this out...

jQuery create array of input options and add them together

5 Answers5