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>

A voir également:

Listes déroulantes en cascade
Liste déroulante en cascade - Guide
Créer des listes déroulantes excel - Guide
Cascade windows 11 - Guide
Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
Liste déroulante en fonction d'un critère - Forum Excel

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"] = [];

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

Réponse 2 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
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

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

Discussions similaires

Liste en cascade Google sheet

[SQL] Faire une suppresion en cascade

Switch en cascade, lenteur réseau

creer une liste d'e mail depuis excel

liste deroulante en cascade 3 niveaux

Discussions similaires

Newsletters