Ajouter et remplacer la somme avec 3 sélections

Question

Je veux construire une calculatrice de petits billets avec 3 options qui s'ajoutent en une somme en direct tout en sélectionnant les listes déroulantes.

$(document).ready(function() { 
 

 
$package = 0; 
 
    $('#package-selection select').each(function(e) { 
 
     $(this).on('change', function(e) { 
 
      //console.log(this.value); 
 
      //console.log($(this).find(":selected").text()); 
 

 
      $package = this.value * parseInt($(this).find(":selected").text()); 
 
      console.log($package); 
 
      updateCount(); 
 
     }); 
 
    }); 
 

 

 
    $sum = 0; 
 
    function updateCount() { 
 
     $sum = $package; 
 
     $('#sum').attr("value", "€ " + $sum +",-"); 
 
    } 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="package-selection"> 
 
    <h3>Choose Package</h3> 
 

 
    <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label> 
 
    <select class="form-control" name="tickets-Festivalpackage"> 
 
     <option value="50">0</option> 
 
     <option value="50">1</option> 
 
     <option value="50">2</option> 
 
     <option value="50">3</option> 
 
     <option value="50">4</option> 
 
     <option value="50">5</option> 
 
    </select><br> 
 
    <label for="tickets-Friday">Friday € 30,-</label> 
 
    <select class="form-control" name="tickets-Friday"> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select><br> 
 
    <label for="tickets-Saturday">Saturday € 30,-</label> 
 
    <select class="form-control" name="tickets-Saturday"> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br> 
 
<input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-"/>

Je ne sais pas quelle est la meilleure façon d'additionner les valeurs dans une somme.

par exemple. Un exemple de calcul pourrait être: 2 billets "Festivalpackage" (€ 50, -) 3 billets "samedi" (€ 30, -) Somme: 190, -

En sidenote: Les listes déroulantes sont construites dynamiquement d'un backend et venir de cette façon.

Merci pour votre aide

Answer 1

Premièrement, attraper l'événement change sur chaque select-box avec la fonction change(). Deuxièmement, utilisez each() fonction d'itérer sur chaque select-box et si elle a changé, multipliez la valeur et le prix pour chaque select-box et ajouter dans la variable $package. Enfin - mettre à jour le prix entier en appelant updateCount fonction.

$(document).ready(function() { 
 
    $('.form-control').change(function() { 
 
    $package = 0; 
 
    $('.form-control').each(function() { 
 
     $package += $(this).find(":selected").text() * $(this).find(":selected").val(); 
 
    }); 
 
    updateCount(); 
 
    }); 
 

 
    function updateCount() { 
 
    $sum = $package; 
 
    $('#sum').attr("value", "€ " + $sum + ",-"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="package-selection"> 
 
    <h3>Choose Package</h3> 
 

 
    <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label> 
 
    <select class="form-control" name="tickets-Festivalpackage" id='package'> 
 
     <option value="50">0</option> 
 
     <option value="50">1</option> 
 
     <option value="50">2</option> 
 
     <option value="50">3</option> 
 
     <option value="50">4</option> 
 
     <option value="50">5</option> 
 
    </select><br> 
 
    <label for="tickets-Friday">Friday € 30,-</label> 
 
    <select class="form-control" name="tickets-Friday" id='friday'> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select><br> 
 
    <label for="tickets-Saturday">Saturday € 30,-</label> 
 
    <select class="form-control" name="tickets-Saturday" id='saturday'> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br> 
 
<input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-" />

Answer 2

La boucle .each() doit être dans le gestionnaire change, pas autour d'elle. Lorsque vous modifiez l'une des listes déroulantes, vous souhaitez parcourir l'ensemble de ces listes et ajouter leurs valeurs au total du package.

BTW, Javascript n'est pas PHP, vous n'avez pas besoin de démarrer les noms de variables avec $.

$(document).ready(function() { 
 

 
    $('#package-selection select').on('change', function(e) { 
 
    var $package = 0; 
 
    $("#package-selection select").each(function() { 
 
     $package += this.value * parseInt($(this).find(":selected").text()); 
 
    }); 
 
    updateCount($package); 
 
    }); 
 

 
    function updateCount($sum) { 
 
    $('#sum').attr("value", "€ " + $sum + ",-"); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="package-selection"> 
 
    <h3>Choose Package</h3> 
 

 
    <label for="tickets-Festivalpackage">Festivalpackage € 50,-</label> 
 
    <select class="form-control" name="tickets-Festivalpackage"> 
 
     <option value="50">0</option> 
 
     <option value="50">1</option> 
 
     <option value="50">2</option> 
 
     <option value="50">3</option> 
 
     <option value="50">4</option> 
 
     <option value="50">5</option> 
 
    </select><br> 
 
    <label for="tickets-Friday">Friday € 30,-</label> 
 
    <select class="form-control" name="tickets-Friday"> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select><br> 
 
    <label for="tickets-Saturday">Saturday € 30,-</label> 
 
    <select class="form-control" name="tickets-Saturday"> 
 
     <option value="30">0</option> 
 
     <option value="30">1</option> 
 
     <option value="30">2</option> 
 
     <option value="30">3</option> 
 
     <option value="30">4</option> 
 
     <option value="30">5</option> 
 
    </select> 
 
</div> 
 
<br> 
 
<br> 
 
<input style="background: none; border: none; outline: none;" type="text" readonly="readonly" id="sum" name="sum" value="€ 0,-" />

Answer 3

Au lieu d'ajouter un écouteur d'événement à chaque balise select, vous pouvez parcourir les options sélectionnées lorsqu'une modification est appliquée sur l'une des sélections.

Quelque chose comme ceci:

$(document).ready(function() { 
    // Target any <select> tag in given container. 
    $('#package-selection select').on('change', function() { 
    // Define a starting total of 0 
    var total = 0; 

    // Loop through all selected options 
    $('#package-selection select option:selected').map(function() { 
     var quantity = parseInt($(this).text(), 10) || 0; 
     var price = this.value; 

     // Add calculated price to our total 
     total += this.value * quantity; 
    }); 

    // Change the price's value 
    $('#sum').attr('value', "€ " + total +",-"); 
    }); 
}); 

Je suppose que cela pourrait encore être optimisé, mais il devrait être suffisant pour un point de départ. Running fiddle si nécessaire.