jquery - jquery - запрос:извлекайте значения из нескольких меню выбора каждый раз, когда выбирается новая опция

Question

Я создаю форму живого ценового предложения с помощью jQuery, используя серию меню выбора.Я придумал приведенный ниже код, который извлекает значения по умолчанию из каждого меню выбора и складывает их вместе:

$(document).ready(function(){
 $('select > option:selected').each(function() {
  var value = $(this).attr('label');

  total = parseFloat(total) + parseFloat(value);
  total = total.toFixed(2);
 });
 printTotal(total); // prints the total price
});

Единственная проблема заключается в том, что это работает только при загрузке страницы.Я бы хотел, чтобы цена обновлялась каждый раз, когда выбирается новое значение в любом из меню выбора (их 6).

Я попытался добавить $("выбрать").изменить(функция () { ...} с помощью триггера (как показано на пример кода здесь) но это суммирует все значения для каждого из меню выбора (т. Е. общее количество в 6 раз превышает то, что должно быть).

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

Пример HTML, если это поможет:

<select id="colors">
 <option label="25.00" value="XYZ">1 color</option>
 <option label="50.50" value="ABC">2 colors</option>
 <option label="75.75" value="MNO">3 colors</option>
</select>

Answer 1

Мэтт, я думаю, ты что-то пробудил в моем сознании, потому что я понял это - по крайней мере, пока это работает.

Вот код, который это делает:

$(document).ready(function(){
    $('select').change(function() {
        var total = 0;
        $('select > option:selected').each(function() {
            var value = $(this).attr('label');

            total = parseFloat(total) + parseFloat(value);
            total = total.toFixed(2);
        });
        printTotal(total);
    });
});

Все сводилось к размещению var total = 0 фрагмент, который должен сбрасываться каждый раз, когда делается новый выбор.

Answer 2

При тестировании в рамках change звоните, вам нужно убедиться, что вы ищете optionы в контексте select элемент, на который вы нажали.

$('select').change(function() {
    var total = 0;

    // note the second parameter passed to the $() function below
    $('option:selected', $(this)).each(function() {
        var value = $(this).attr('label');
        total += parseFloat(value).toFixed(2);
    });
    printTotal(total);
});