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

Question

[DeadCom]

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

<section class="section">
        < orm>
            <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">

Answer 1

[0xD34F]

Как будем складывать значения элементов:

const sum = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, n) => acc + (+n.value || 0),
    0
  );

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

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

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

document.querySelector('form').addEventListener('change', function(e) {
  if (e.target.tagName === 'SELECT') {
    document.querySelector('input').value = sum(this.getElementsByTagName('select'));
  }
});

Comments

[DeadCom]

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

Answer 2

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

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