Getting the sum of multiple array in javascript or jquery

Question

How can I get the sum these 2 arrays in JS or jquery. I also want to check if b exists or not empty. Here's my code:

$('select[name=changer]').change(function() {
  var one = $(this).val();
  if (one == 'one') {
    alert('One');
  } else {
    var all_grade1 = $('select[name=grade\\[\\]]').val() || [];
    var all_grade2 = $('select[name=has_grade\\[\\]]').val() || [];
    var alls = all_grade1.concat(all_grade2);

    var yes = alls.reduce(getSum, 0);
    alert(yes);
  }

});

function getSum(total, value) {
  return total + parseInt(value, 10);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="changer">
  <option value="one">One</option>
  <option value="multiple">Multiple</option>
</select>
<hr />
<select name="grade[]">
  <option value="1">Grade1</option>
  <option value="2">Grade2</option>
  <option value="3">Grade3</option>
</select>
<select name="grade[]">
  <option value="2">Grade2</option>
  <option value="4">Grade4</option>
  <option value="6">Grade6</option>
</select>
<select name="has_grade[]">
  <option value="1">HasGrade1</option>
  <option value="2">HasGrade2</option>
  <option value="3">HasGrade3</option>
</select>

I have research about this, but nothing seems to be match with my problem. Any suggestions/answers?

Answer 1

Query the DOM for all the relevant <select> elements

$('select[name=grade\\[\\]], select[name=has_grade\\[\\]]')

Iterate over them and get the value of the selected options as numbers

.get().map(function(select) {
    return parseInt(select.value, 10)
})

and sum them up

.reduce(getSum, 0)

All together this would look something like this:

$('select[name=changer]').change(function() {
  var one = $(this).val();

  if (one == 'one') {
    console.log('One');
  } else {
    var selects = $('select[name=grade\\[\\]], select[name=has_grade\\[\\]]');
    var yes = selects.get()                    // get the matched DOM nodes as an array
                      .map(function(select) {  // get the values (as numbers) of the selected options
                        return parseInt(select.value, 10);
                      })
                      .reduce(getSum, 0);      // sum the selected options

    console.log(yes);
  }
});

$('select[name=changer]').change(function() {
  var one = $(this).val();

  if (one == 'one') {
    console.log('One');
  } else {
    var selects = $('select[name=grade\\[\\]], select[name=has_grade\\[\\]]');
    var yes = selects.get()                    // get the matched DOM nodes as an array
                      .map(function(select) {  // get the values (as numbers) of the selected options
                        return parseInt(select.value, 10);
                      })
                      .reduce(getSum, 0);      // sum the selected options

    console.log(yes);
  }
});

function getSum(total, value) {
  return total + parseInt(value, 10); // or parseFloat() depending on the value
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="changer">
  <option value="one">One</option>
  <option value="multiple">Multiple</option>
</select>
<hr />
<select name="grade[]">
  <option value="1">Grade1</option>
  <option value="2">Grade2</option>
  <option value="3">Grade3</option>
</select>

<select name="grade[]">
  <option value="2">Grade2</option>
  <option value="4">Grade4</option>
  <option value="6">Grade6</option>
</select>
<select name="has_grade[]">
  <option value="1">HasGrade1</option>
  <option value="2">HasGrade2</option>
  <option value="3">HasGrade3</option>
</select>