Sujet Précédent Sujet Suivant

Listes déroulantes en cascade

Résolu/Fermé
isa-- Messages postés 77 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 11 mars 2020 - Modifié le 13 nov. 2017 à 22:06
isa-- Messages postés 77 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 11 mars 2020 - 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>




2 réponses

Réponse 1 / 2
Yoda
13 nov. 2017 à 22:06
Bonjour

Il suffit d'ajouter une liste vide

// erreur client
nom["p1"] = [];
0
isa-- Messages postés 77 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 11 mars 2020 1
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
0
Réponse 2 / 2
jordane45 Messages postés 38288 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 15 novembre 2024 4 703
Modifié le 13 nov. 2017 à 22:32
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                                                                 
0
isa-- Messages postés 77 Date d'inscription lundi 16 septembre 2013 Statut Membre Dernière intervention 11 mars 2020 1
13 nov. 2017 à 22:45
Nickel.
Merci beaucoup

Bonne soirée
0

Discussions similaires

Liste en cascade Google sheet
Amande -
Raymond PENTIER -

3 réponses
creer une liste d'e mail depuis excel
melesse35 -
pelo47 -

28 réponses
cascade dans platine
antoine hess -
tiplouf37 -

7 réponses
ordre alphabetique sous word
raro -
gogo -

27 réponses
Liste déroulante sur plusieurs lignes
Soho23 -
via55 -

7 réponses