jQuery - суммируя значения нескольких числовых <select>элементов?

Question

У меня есть форма, которая запрашивает адреса. После каждого адреса мы спрашиваем, сколько человек прожил по этому адресу, с выпадающими списками <select> по годам и месяцам.

У меня есть событие jQuery при каждом изменении <select>:

var prev_addresses = 0;
$('select.months, select.years').change(function() {

    // Calculate total months
    var months = $('select.months').val();
    var years = $('select.years').val();
    var total_months = parseInt(months) + parseInt(years*12);   // We parseInt() to avoid concatenation

    console.log('Total months: '+total_months);

    if(total_months < 12) {
        // Find the next div.hidden-address
        prev_addresses = prev_addresses+1;
        console.log('Number of previous addresses: '+prev_addresses);
        console.log('');
        $('div.hidden-address').clone(true).appendTo('#previous-addresses').slideToggle();
    }
});

Я хочу, чтобы это продолжалось все время, пока у человека меньше 12 месяцев адресов. Однако после первого запуска события при каждом обновлении <select> консоль просто регистрирует первый набор значений (из исходных значений года и месяца, даже если теперь их несколько).

Я хочу суммировать значения каждого <select> элемента на странице, даже после динамического добавления дополнительных элементов. Как я могу это сделать?

Надеюсь, что это имеет смысл, я с удовольствием уточню, если вам нужны дополнительные подробности.

Спасибо

Jack

Answer 1

Перебрать все поля выбора и добавить значение в переменную, что-то вроде этого:

var totalMonths = 0;
$('select.months').each(function () {
    totalMonths += $(this).val();
});

$('select.years').each(function () {
    totalMonths += 12 * $(this).val();
});