Как с помощью JQUERY перебрать и сложить значение нескольких select?

Question

[DeadCom]

Есть следующий код, как сделать так, чтобы значение опций суммировалось и выводилось в input?

<form>
  <h2>Раздел 1</h2>
  <select>
    <option selected disabled>Выберите пункт...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <h2>Раздел 2</h2>
  <select>
    <option selected disabled>Выберите пункт...</option>
    <option value="4">1</option>
    <option value="5">2</option>
    <option value="6">3</option>
  </select>
  <h2>Раздел 3</h2>
  <select>
    <option selected disabled>Выберите пункт...</option>
    <option value="7">1</option>
    <option value="8">2</option>
    <option value="9">3</option>
  </select>
  <input class="d-block res" type="text" value="0" id="result">
</form>

Answer 1

[0xD34F]

Функция суммирования:

function sum(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = 0;

  for (const n of data) {
    result += +getVal(n) || 0;
  }

  return result;
}

Элементы могут быть представлены как jquery-объект, NodeList или HTMLCollection (ну и разумеется, обычный массив, если что, тоже будет обсчитан как надо):

const $form = $('form').on('change', 'select', () => {
  $('#result').val(sum($form.find('select'), n => $(n).val()));
});

const input = document.querySelector('#result');
const selects = document.querySelectorAll('form select');
const onChange = () => input.value = sum(selects, 'value');
selects.forEach(n => n.addEventListener('change', onChange));

document.forms[0].addEventListener('change', function(e) {
  if (e.target.tagName === 'SELECT') {
    document.getElementById('result').value = sum(
      this.getElementsByTagName('select'),
      n => n.selectedOptions[0].getAttribute('value')
    );
  }
});

Comments

[DeadCom]

Спасибо за решение! И ещё возможно вы сможете подсказать, если бы был второй input как исходя уже из существующего селекта задать опциям вторые значения и для нового input суммировать уже их? Прощу прощения если не очень четко смог выразить свой вопрос

Answer 2

[Антон Шаманов]

$('option').each(function (...) {...})