jquery: saisir les valeurs à partir de plusieurs menus de sélection à chaque fois qu'une nouvelle option est choisie

Question

Je construis un prix en direct sous forme de devis avec jQuery, en utilisant une série de menus de sélection. Je suis venu avec le code ci-dessous, qui saisit les valeurs par défaut de chaque menu de sélection et les additionne:

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

Le seul problème est que cela ne fonctionne que lorsque la page se charge. Je voudrais que le prix à mis à jour chaque fois qu'une nouvelle valeur est sélectionnée dans l'un des menus de sélection (il y a 6).

J'ai essayé d'ajouter $ ( "select") changement (function () {...} avec un déclencheur (comme indiqué dans la section

Était-ce utile?

Nous faire parvenir

La solution

Matt, je pense que vous avez quelque chose dans mon déclenchez l'esprit, parce que je pensais - tout au moins, cela fonctionne jusqu'à présent

.

Voici le code qui le fait:

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

Il est descendu à la mise en place de var total = 0 pièce, qui doit être remis à zéro à chaque fois une nouvelle sélection.

Answer 1

Matt, je pense que vous avez quelque chose dans mon déclenchez l'esprit, parce que je pensais - tout au moins, cela fonctionne jusqu'à présent

.

Voici le code qui le fait:

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

Il est descendu à la mise en place de var total = 0 pièce, qui doit être remis à zéro à chaque fois une nouvelle sélection.

Answer 2

Lors de tests effectués dans l'appel change, vous devez vous assurer que vous effectuez une recherche options dans le contexte de l'élément select que vous avez cliqué.

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