Menu

Listes déroulantes en cascade [Résolu]

isa-- 64 Messages postés lundi 16 septembre 2013Date d'inscription 19 février 2018 Dernière intervention - 13 nov. 2017 à 21:44 - Dernière réponse : isa-- 64 Messages postés lundi 16 septembre 2013Date d'inscription 19 février 2018 Dernière intervention
- 13 nov. 2017 à 22:45
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>




Afficher la suite 

Votre réponse

4 réponses

0
Merci
Bonjour

Il suffit d'ajouter une liste vide

// erreur client
nom["p1"] = [];
isa-- 64 Messages postés lundi 16 septembre 2013Date d'inscription 19 février 2018 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
Commenter la réponse de Yoda
jordane45 21707 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 juillet 2018 Dernière intervention - Modifié par jordane45 le 13/11/2017 à 22:32
0
Merci
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-- 64 Messages postés lundi 16 septembre 2013Date d'inscription 19 février 2018 Dernière intervention - 13 nov. 2017 à 22:45
Nickel.
Merci beaucoup

Bonne soirée
Commenter la réponse de jordane45