Je souhaite attribuer plusieurs valeurs à une sélection déroulante qui sont ensuite résumées dans un champ de texte.
Ainsi, par exemple, je pourrais avoir trois articles déroulants: apéritif, entrée, côté. Je pourrais avoir deux champs résultants: calories et coût. Cela signifie que si une personne sélectionne «salade» à partir de la liste déroulante de l'apéritif, la «salade» doit avoir une valeur de coût et de calories associée à celle-ci. Ladite valeur devra également résumer quelles que soient les valeurs de calories et de coûts de l'entrée et des déposées latérales. P>
par une autre réponse sur le site, j'ai commencé avec le code suivant pour somme des valeurs de plusieurs déposées: http://jsfiddle.net/sf1hwp2y/ p>
html: p> XXX PRE>
JavaScript + JQuery: P>
$('select').change(function(){
var sum = 0;
$('select :selected').each(function() {
sum += Number($(this).val());
});
$("#sum").html(sum);
});
3 Réponses :
Il suffit d'ajouter des propriétés options telles que data-Price = '123' puis récupérez-les avec $ (this) .attr ("prix de données")
Vous pouvez probablement utiliser des attributs de données sur le
quelque chose comme ceci: puis, avec votre JS:
+1 J'irais plus loin et j'ai à la fois Coût de données et Data-calories et réserve valeur pour tenir Le choix réel - un nom ou IDNumber de l'élément de menu choisi. Les deux éléments de données peuvent être utilisés pour afficher l'utilisateur final, les totaux, tandis que la valeur est ce qui est enregistré, ou envoyé à la cuisine, ou autre.
@Stephenp Ouais, je considère que, mais j'étais un peu paresseux si je suis honnête! Bonne idée cependant. Il permettrait également de davantage d'expansion à l'avenir - ajout peut-être des ingrédients, des informations sur les allergies, etc..
Vous pouvez mettre plusieurs valeurs séparées par un délimiteur, puis utiliser .split () code> pour diviser. $('select').change(function(){
var total_calories = 0;
var total_price = 0;
$('select').each(function() {
let [calories, price] = $(this).val().split(",");
total_calories += parseInt(calories);
total_price += parseFloat(price);
});
$("#calories").text(total_calories);
$("#price").text(total_price);
});