javascript - 在javascript或jquery中获取多个数组的总和

Question

如何在 JS 或 jquery 中获得这些 2 个数组 的总和。我还想检查 b 是否存在或不为空。这是我的代码:

$('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>

我对此进行了研究，但似乎没有任何内容与我的问题相符。有什么建议/答案吗？

Answer 1

在 DOM 中查询所有相关 <select>元素

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

迭代它们并获取所选选项的数字值

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

并总结它们

.reduce(getSum, 0)

总的来说，这看起来像这样:

$('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>