11521 sujets

JavaScript, DOM et API Web HTML5

Jquery - Calcul avec plusieurs choix

Bonjour tout le monde,

Je me permets de poster ici.. car étant débutant en Jquery.. j'aurai souhaité créer un calculateur de devis tres simple.

Je m'explique :
Je souhaiterais avoir 2 menus déroulants dans le premier menu chaque élément aurait un prix ( une variable définie ) et un deuxième menu avec également chaque élément un prix. Et additionner les 2 choix ( les variables ) de chaque menu pour me donner un résultat.

Exemple : Premier menu = T-shirt : 10euro
Deuxième menu = Impression : 4 euro
Total = 14euro.

J'ai bien jeté un œil sur les additions en jquery. mais je ne parviens pas a afficher le résultat dans ma page HTML a chaque fois que je sélectionne un élément. je parviens a afficher la valeur de ma variable a l'ouverture de la page, mais comment interagir avec pour qu'elle change automatiquement?

Je ne sais pas si j'ai été clair? Dans l'attente de votre retour pour m'éclairer a ce sujet.
Je vous souhaite une excellente journée.

Bien à vous,
NeSo
Modérateur
Salut,

En me basant sur l'exemple donné par slamjoker et jquery : 
<select id="option1" name="option1">
  <option value="5">cinq</option>
  <option value="10">dix</option>
  <option value="15">quinze</option>
  <option value="20">vingt</option>
</select>
+
<select id="option2" name="option2">
  <option value="5">cinq</option>
  <option value="10">dix</option>
  <option value="15">quinze</option>
  <option value="20">vingt</option>
</select>
=
<div id="result"></div>

$( "select" )
  .change(function () {
    var result = "";
    var option1 = Number( $( "#option1" ).val() );
    var option2 = Number( $( "#option2" ).val() );
    result = option1 + option2;
    $( "#result" ).text( result );
  })
  .change();

https://jsfiddle.net/undless/f9sLj4r5/

Largement optimisable je pense mais c'est un POC..

Bonne soirée
Bonsoir,

Je vous remercie pour votre réponse ! Je vais jeter un oeil sur le .onChange

Un grand merci Smiley smile
Modifié par NeSo (28 Oct 2020 - 23:07)
Bonjour,

Je me permets de revenir vers vous car votre aide m'a été bien précieuse ! Je suis donc parvenu a mes fins. cependant je rencontre un nouveau soucis.

J'aurai souhaité exécuté une action .hide sur le choix d'une option.
Voila mon test qui ne fonctionne pas.

<select id="option2" name="option2">
  <option value="5">cinq</option>
  <option value="10" id="test">dix</option>
  <option value="15">quinze</option>
  <option value="20">vingt</option>
</select>


$('#test').click(function(e){
$("#cat-tshirt").hide();
});


Mais aucune action s'effectue.. une solution?

Merci d'avance !

Bien à vous,
NeSo
Salut,

C'est parce que tu ne peux pas faire de "click" sur une option.
Il faut faire un événement "change" sur le select puis dans la fonction de change déterminer si l’élément que tu as sélectionner est l’élément que tu voulais essayer de cliquer ou pas

Edit : Le petit bout de code qui doit correspondre

$('#option2').change(function() {
  if ($(this)[0].selectedOptions[0].id == "test") 
  {
    $("#cat-tshirt").hide();
  }
});


(Je ne sais pas si en jquery il y a une façon simplifier d'obtenir directement l'option sélectionnée d'un select)


Edit 2 : Deuxième version après avoir lu cette page : https://api.jquery.com/selected-selector/

$('#option2').change(function() {
  if ($("select option:selected")[0].id == "test") 
  {
    $("#cat-tshirt").hide();
  }
});

Modifié par Mathieuu (29 Oct 2020 - 16:06)
Sujet clos
Aller à