Signaler

Listes déroulantes en cascade [Résolu]

Posez votre question isa-- 45Messages postés lundi 16 septembre 2013Date d'inscription 13 novembre 2017 Dernière intervention - Dernière réponse le 13 nov. 2017 à 22:45 par isa--
Bonjour à tous,
J'ai besoin d'aide car je ne suis pas trop forte en javascript, or, je n'ai trouvé que cette solution pour pouvoir faire des listes déroulantes en cascade.

Après maintes heures passées là dessus, j'y sui presque, mais pas tout à fait..
Voici mes listes déroulantes en cascade :
1) erreur
2) nom
3) motif

-Si erreur bureau on affiche liste nom puis liste motif correspondantes
-si erreur client pas de liste de nom mais liste motif
-si erreur commercial liste nom et liste motif

J'ai du faire une bourde car ca ne marche pas pour erreur client...
Pouvez vous m'aider ?

Merci d'avance.

Voici mon code :

<html>
<head>
<script type="text/javascript">
var erreur = [];
erreur[0] = ["p0", "Bureau"];
erreur[1] = ["p1", "Client"];
erreur[2] = ["p2", "Commercial"];


var nom=[];
// erreur Bureau
nom["p0"] = [];
nom["p0"][0] = ["p0v0", "Aymeric"];
nom["p0"][1] = ["p0v1", "Carine"];
nom["p0"][2] = ["p0v2", "Cindy"];
nom["p0"][3] = ["p0v3", "Magali"];
nom["p0"][4] = ["p0v4", "Sophie"];

//erreur Commercial
nom["p2"]=[];
nom["p2"][0] = ["p2v0", "DUPONT"];
nom["p2"][1] = ["p2v1", "MARNIER"];
nom["p2"][2] = ["p2v2", "CATARD"];
nom["p2"][3] = ["p2v3", "LAURON"];
nom["p2"][4] = ["p2v4", "PAGEARD"];
nom["p2"][5] = ["p2v5", "PUNAUT"];
nom["p2"][6] = ["p2v6", "VARNIER"];
nom["p2"][7] = ["p2v7", "VERNEDAL"];

var motif=[];
// erreur bureau
motif["p0"] = [];
motif["p0"][0] = ["p0m0", "Prise de cde"];
motif["p0"][1] = ["p0m1", "Conseil"];
motif["p0"][2] = ["p0m2", "Incompréhension"];
motif["p0"][3] = ["p0m3", "Erreur Ref"];
motif["p0"][4] = ["p0m4", "Saisie de cde"];
motif["p0"][5] = ["p0m5", "A justifier"];

// erreur client
motif["p1"] = [];
motif["p1"][0] = ["p1m0", "Erreur ref client"];
motif["p1"][1] = ["p1m1", "Annulation cde"];
motif["p1"][2] = ["p1m2", "Manque précision"];
motif["p1"][3] = ["p1m3", "Erreur quantité"];
motif["p1"][4] = ["p1m4", "Problème de prix"];

// erreur commercial
motif["p2"] = [];
motif["p2"][0] = ["p2m0", "Prise de commande"];
motif["p2"][1] = ["p2m1", "Conseil technique"];



function filltheselect(liste, choix)
{switch (liste)
{
case "listeerreur":
raz("listenom");
raz("listemotif");
for (i=0; i<nom[choix].length; i++)
{
new_option = new Option(nom[choix][i][1],nom[choix][i][0]);
document.formu.elements["listenom"].
options[document.formu.elements["listenom"].length]=new_option;
}
for (i=0; i<motif[choix].length; i++)
{
new_option = new Option(motif[choix][i][1],motif[choix][i][0]);
document.formu.elements["listemotif"].options[document.formu.
elements["listemotif"].length]=new_option;
}
break;

}
}

function raz(liste)
{l=document.formu.elements[liste].length;
for (i=l; i>=0; i--)
document.formu.elements[liste].options[i]=null;
}
</script>
</head>
<body>
<form name="formu">
Choisir une erreur
<select name="listeerreur" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<erreur.length; i++)
document.write("<option value=\"" +erreur[i][0]+ "\">" +erreur[i][1]);
</script>
</select>
<br>
Choisir un nom
<select name="listenom" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<nom["p0"].length; i++)
document.write("<option value=\"" +nom["p0"][i][0]+ "\">" +nom["p0"][i][1]);
</script>
</select>
<br>
Choisir un motif
<select name="listemotif" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<motif["p0"].length; i++)
document.write("<option value=\"" +motif["p0"][i][0]+ "\">" +motif["p0"][i][1]);
</script>

<br>
</select>
</form>
</body>
</html>




Utile
+0
plus moins
Bonjour

Il suffit d'ajouter une liste vide

// erreur client
nom["p1"] = [];
isa-- 45Messages postés lundi 16 septembre 2013Date d'inscription 13 novembre 2017 Dernière intervention - 13 nov. 2017 à 22:43
Merci beaucoup.
En effet, c'est exact.
Entretemps je m'en étais rendu compte.

Encore merci et bonne soirée
Répondre
Donnez votre avis
Utile
+0
plus moins
Bonjour,

De façon plus propre .. voici ton code revu et corrigé.
(je me suis également permis d'jaouter le fait de masquer la liste si elle est vide...)

<!DOCTYPE html>
<html lang="fr"
  <head>
    <meta charset="utf-8">
    <title>CHOIX LISTE EN CASACADE</title>
 <style>
  .selectWrapper{
    display:inline-block;
    border:1px solid #cccccc;
  }
  .selectBox{
    width:120px;
    border:0px;
    outline:none;
  }
  
  .form-group{
   display:block;
   vertical-align:middle;
   margin:5px;
  }
  
  .form-group>span {
    display: inline-block;
    width:120px !important;
  }
  
  .form-vertical{
   display: block;
  }
  
 </style>
</head>
<body>
 <form name="formu" class="form-vertical"> 
  <div class="form-group" id="div_listeerreur">
   <span>Choisir une erreur</span>
   <div class="selectWrapper">
    <select name="listeerreur" 
      id="listeerreur" 
      onChange='filltheselect(this.id, this.value)'
      class="selectBox">
    </select>
   </div>
  </div>
  <div class="form-group" id="div_listenom">
   <span>Choisir un nom</span>
   <div class="selectWrapper"> 
    <select name="listenom"  
      id="listenom" 
      class="selectBox">
    </select>
   </div>
  </div>
   <div class="form-group" id="div_listemotif">
    <span>Choisir un motif</span>
    <div class="selectWrapper">
    <select name="listemotif" 
      id="listemotif"
      class="selectBox">
    </select>
   </div>
  </div>
 </form>
</body>
  
    <script type="text/javascript">
    var erreur = []; 
 var nom=[];
 var motif=[];
 
 erreur[0] = ["p0", "Bureau"]; 
 erreur[1] = ["p1", "Client"];
 erreur[2] = ["p2", "Commercial"];
   
 // erreur Bureau
 nom["p0"] = [];
 nom["p0"][0] = ["p0v0", "Aymeric"];
 nom["p0"][1] = ["p0v1", "Carine"];
 nom["p0"][2] = ["p0v2", "Cindy"];
 nom["p0"][3] = ["p0v3", "Magali"];
 nom["p0"][4] = ["p0v4", "Sophie"];
  
 //erreur Commercial
 nom["p2"]=[];
 nom["p2"][0] = ["p2v0", "DUPONT"];
 nom["p2"][1] = ["p2v1", "MARNIER"]; 
 nom["p2"][2] = ["p2v2", "CATARD"];
 nom["p2"][3] = ["p2v3", "LAURON"];
 nom["p2"][4] = ["p2v4", "PAGEARD"];
 nom["p2"][5] = ["p2v5", "PUNAUT"];
 nom["p2"][6] = ["p2v6", "VARNIER"];
 nom["p2"][7] = ["p2v7", "VERNEDAL"];

 
 // erreur bureau
 motif["p0"] = [];
 motif["p0"][0] = ["p0m0", "Prise de cde"];
 motif["p0"][1] = ["p0m1", "Conseil"];
 motif["p0"][2] = ["p0m2", "Incompréhension"];
 motif["p0"][3] = ["p0m3", "Erreur Ref"];
 motif["p0"][4] = ["p0m4", "Saisie de cde"];
 motif["p0"][5] = ["p0m5", "A justifier"];
  
// erreur client
 motif["p1"] = [];
 motif["p1"][0] = ["p1m0", "Erreur ref client"];
 motif["p1"][1] = ["p1m1", "Annulation cde"];
 motif["p1"][2] = ["p1m2", "Manque précision"];
 motif["p1"][3] = ["p1m3", "Erreur quantité"];
 motif["p1"][4] = ["p1m4", "Problème de prix"];

// erreur commercial
 motif["p2"] = [];
 motif["p2"][0] = ["p1m0", "Prise de commande"];
 motif["p2"][1] = ["p1m1", "Conseil technique"];
 
  //-------------------------------------------------//
  // Fonction pour remplir les listes
  //-------------------------------------------------//
  function init_list(listId,arrayValues){
  var liste = document.getElementById(listId);
  arrayValues.forEach(function(element) {
   var option = document.createElement("option");
   option.value = element[0];
   option.text = element[1];
   liste.add(option);
  });
  
  }
  
  //-------------------------------------------------//
  // On rempli les listes en fonction du choix
  //-------------------------------------------------//
  function filltheselect(listeId, choix){
  console.log(listeId);
  switch (listeId)  {
   case "listeerreur":   
  
    console.log(choix);
    
    raz("listenom");
    raz("listemotif");
    
    //Si la variable nom a une clé qui existe par rapport au choix
    if(typeof(nom[choix]) != "undefined" && nom[choix]!=null){
     init_list('listenom',nom[choix]);
     document.getElementById('div_listenom').style.display = 'block';
    }else{
      document.getElementById('div_listenom').style.display = 'none';
    }
    
    //Si la variable motif a une clé qui existe par rapport au choix
    if(typeof(motif[choix]) != "undefined" && motif[choix]!=null){    
     init_list('listemotif',motif[choix]);
     document.getElementById('div_listemotif').style.display = 'block';
    }else{
      document.getElementById('div_listemotif').style.display = 'none';
    }
   break;
  }
  }
  
  function  raz(listeId){
  var liste = document.getElementById(listeId);
  liste.innerHTML = "";
  }
       
  
 //-------------------------------------------------// 
 //initialisation des listes
 //-------------------------------------------------//
  init_list('listeerreur',erreur);
  init_list('listenom',nom["p0"]);
  init_list('listemotif',motif["p0"]);
  

    </script>
  </body>
</html>


Au passage ... prend l'habitude de placer ton JS à la fin de ta page... (avant le </body>).
de cette façon ton HTML est chargé même en cas de souci dans ton js. (c'est également préférable pour les robots lorsque tu veux faire indexer tes pages dans un moteur de recherche).
De toutes façons, placer son js dans le head.... ça ne se fait plus.....


NB² : On évite de travailler avec les "name" des élements...
En JS on utilise les ID ou les CLASS.
La syntaxe form.nomelement. .... c'était comme ça il y a 15 ans.......

Cordialement, 
Jordane                                                                 
isa-- 45Messages postés lundi 16 septembre 2013Date d'inscription 13 novembre 2017 Dernière intervention - 13 nov. 2017 à 22:45
Nickel.
Merci beaucoup

Bonne soirée
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !