Listes déroulantes en cascade

Résolu

isa-- Messages postés 82 Date d'inscription Statut Membre Dernière intervention -
isa-- Messages postés 82 Date d'inscription Statut Membre 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

A voir également:

Listes déroulantes en cascade
Liste déroulante en cascade - Guide
Listes déroulantes excel - Guide
Comment mettre sa liste d'amis en privé sur facebook - 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

2 réponses

Réponse 1 / 2

Yoda

Bonjour

Il suffit d'ajouter une liste vide

// erreur client
nom["p1"] = [];

isa-- Messages postés 82 Date d'inscription Statut Membre Dernière intervention 1

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 82 Date d'inscription Statut Membre Dernière intervention 1

Nickel.
Merci beaucoup

Bonne soirée

Discussions similaires

Liste en cascade Google sheet

Zelda wind waker

Plusieurs listes déroulante en cascade sous Google Sheets

Problème listes déroulantes en cascade sur Google sheet qui se deploient

cascade dans platine

Votre réponse

Discussions similaires