Bonjour,

J'essaye de faire un petit script avec Jquery pour afficher des champs texte en fonction de ma liste déroulante, selon mon code suivant :

<select name="couleur">
<option value="rouge">rouge</option>
<option value="vert">vert</option>
<option value="bleu">bleu</option>
<option value="noir">noir</option>
<option value="blanc">blanc</option>
</select>

<input type="text" class="champ1" name="champ1" value="champ1" />
<input type="text" class="champ2" name="champ1" value="champ2" />
<input type="text" class="champ3" name="champ1" value="champ3" />
<input type="text" class="champ4" name="champ1" value="champ4" />

En fonction de ma séléction, si je selectionne rouge je n'affiche aucun champ, si je selectionne vert j'affiche un seul champ, le bleu 2 champs, le noir 3 champs et le blanc 4 champs

j'ai essayé de commencer par faire ceci :

$("select[name=couleur]").change( function() {
       
        $("select[name=couleur] option[value='rouge']:selected").each(function() {
            $(".champ1").hide();
            $(".champ2").hide();
            $(".champ3").hide();
            $(".champ4").hide();
        } )
        
    } )

mais je trouve ca redondant, existerait t'il une méthode un peu plus pratique ?

Merci,

J'ai tendance à coder plutôt en JS pur, donc désolé pour les fautes si y en a...

var couleur = $("select[name=couleur]").val(), nbre;
switch(couleur){
   case "rouge":nbre=0;break;
   case "vert":nbre=1;break;
   case "bleu":nbre=2;break;
   case "noir":nbre=3;break;
   case "blanc":nbre=4;break;
   default: // action par défaut, tu fais ce que tu veux si ça correspond pas à tout ce qui est avant;
}
// Cache tout
            $(".champ1").hide();
            $(".champ2").hide();
            $(".champ3").hide();
            $(".champ4").hide();
// Affiche ceux qu'il faut
for(var i=0;i<nbre;i++){
   $(".champ"+i).show();
}

Merci birdy42 pour cette réponse :), meme en javascript pur ca reste pratique aussi ;).
Je m'en vais essayer.

Pense à mettre ton sujet en résolu à l'aide du lien en bas de page si c'est ok

Hello je reviens en fait car j'ai pas réussi totalement a faire ce que je voulais.
J'ai suivi ton code birdy 42, le voici :

// Cache tout
            $(".champ1").hide();
            $(".champ2").hide();
            $(".champ3").hide();
            $(".champ4").hide();

$('select[name="couleur"]').change( function() {

var couleur = $('select[name="couleur"]').val()
var nbre;
switch(couleur){
   case "rouge":
       nbre=0;
       break;
   case "vert":
       nbre=1;
       break;
   case "bleu":
       nbre=2;
       break;
   case "noir":
       nbre=3;
       break;
   case "blanc":
       nbre=4;
       break;

       default: alert("default");
}

// Affiche ceux qu'il faut
for(var i=1;i<=nbre;i++){
   
   $(".champ"+i).show();
}


});

J'arrive a afficher les champs que je veux au déroulement de ma liste. Mais j'arrive plus a les re cacher lorsque je séléctionne une autre valeur.
Exemple je séléctionne blanc ca m'affiche les 4 champs, mais si je séléctionne ensuite rouge, ca me laisse les quatre champs affichés.
Je sais que ca vient de ma boucle, mais comment dire que lorsque je clique, tu m'affiche le champ a l'indice i et tu masque tous ceux qui ne sont pas à l'indice i ?
Merci.

Si tu avais mis dans le bon ordre c'était bon
Il faut mettre les .hide() dans la fonction onchange aussi.

Huhu suis-je bête... Merci encore birdy !