jquery: afferrare i valori da più selezionare i menu ogni volta che una nuova opzione viene scelta

Question

Sto costruendo una forma preventivo dal vivo con jQuery, utilizzando una serie di selezionare i menu. Mi è venuta in mente il codice qui sotto, che afferra i valori di default di ogni menu di selezione e li somma:

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

L'unico problema è che questo funziona solo quando la pagina viene caricata. Mi piacerebbe il prezzo per essere aggiornato ogni volta che un nuovo valore viene selezionata in uno qualsiasi dei menù selezionati (ci sono 6).

Ho provato ad aggiungere $ ( "select") cambiamento (function () {...} con un trigger (come mostrato nella codice esempio qui ) ma che somma tutti i valori per ciascuno dei menu selezionare (cioè, il totale è 6 volte quello che dovrebbe essere).

Ho cercato i documenti, ma non riesco a capire quale evento da utilizzare. Chiunque può aiutare?

HTML di esempio se aiuta:

<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

Matt, penso che innescato qualcosa nella mia mente, perché ho capito - almeno, funziona finora

.

Ecco il codice che lo fa:

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

E 'venuto giù al posizionamento del var totale = 0 pezzo, che deve essere ripristinata ogni volta che una nuova selezione viene effettuata.

Answer 2

Quando si verifica all'interno della chiamata change, è necessario fare in modo che si cerca options nel contesto dell'elemento select che si è fatto clic su.

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