jquery: greifen die Werte von mehreren Auswahlmenüs jedesmal, wenn eine neue Option gewählt wird

Question

Ich baue eine Live-Preisangebot Form mit jQuery, eine Reihe von Auswahlmenüs. Ich habe unten mit dem Code kommen, die die Standardwerte von jedem Auswahlmenü packt und fügt sich zusammen:

$(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
});

Das einzige Problem ist, dass dies nur funktioniert, wenn die Seite geladen. Ich würde den Preis gerne ein neuer Wert jedes Mal aktualisiert wird, wird in einen des Auswahlmenüs ausgewählt (es gibt 6).

Ich habe versucht, Hinzufügen von $ ( "select") Änderung (function () {...} mit einem Trigger (wie in der

War es hilfreich?

einreichen

Lösung

Matt, ich glaube, Sie etwas in meinem Kopf ausgelöst, weil ich es herausgefunden - zumindest, sich so weit funktioniert

.

Hier ist der Code, der es tut:

$(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);
    });
});

Es kam zu Platzierung nach unten von dem var total = 0 Stück, das eine neue Auswahl zurückgesetzt jedes Mal werden muss wird.

Answer 1

Matt, ich glaube, Sie etwas in meinem Kopf ausgelöst, weil ich es herausgefunden - zumindest, sich so weit funktioniert

.

Hier ist der Code, der es tut:

$(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);
    });
});

Es kam zu Platzierung nach unten von dem var total = 0 Stück, das eine neue Auswahl zurückgesetzt jedes Mal werden muss wird.

Answer 2

Wenn innerhalb der change Aufruf testen, müssen Sie sicherstellen, dass Sie options im Rahmen des select Element suchen, dass Sie darauf geklickt wurde.

$('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);
});