Gestion de Select liés

Gestion de Select liés - HTML/CSS - Programmation

Marsh Posté le 03-12-2009 à 01:05:07    

Bonjour,
 
J'ai une liste principale qui contient 4 éléments.
 
Chaque choix d'option principal (1,2, 3 ou 4), genere trois listes correpondantes qui viendrons s'afficher au-dessous et chaqu'une contient des choix dépendants.
 

Code :
  1. <div align="center">
  2. <div align="center">
  3.  <table border="2" width="50%" bordercolor="#0000FF" style="border-collapse: collapse">
  4.   <tr>
  5.    <td bgcolor="#0000FF">
  6.    <p align="center"><font color="#FFFFFF" face="Tahoma" size="2">Lister
  7.    les intervenants</font></p>
  8.    </td>
  9.   </tr>
  10.   <tr>
  11.    <td width="99%">
  12.    <form method="POST" action="action.php">
  13.     <table border="0" width="100%">
  14.      <tr>
  15.       <td><font face="Tahoma" size="2">Lister les intervenants
  16.       </font></td>
  17.       <td><select name="S">
  18.       <option selected="selected">Selectionner</option>
  19.       <option>Par Ecole</option>
  20.       <option>Par Discipline</option>
  21.       <option>Par Localisation</option>
  22.       <option>Par Circonscription</option>
  23.       </select> </td>
  24.      </tr>
  25.     </table>
  26.    </form>
  27.    </td>
  28.   </tr>
  29.  </table>
  30. </div>
  31. <p>&nbsp;</p>
  32. <table border="2" width="50%" bordercolor="#0000FF" style="border-collapse: collapse">
  33.  <tr>
  34.   <td bgcolor="#0000FF">
  35.   <p align="center"><font color="#FFFFFF" face="Tahoma" size="2">Lister
  36.   les intervenants</font></p>
  37.   </td>
  38.  </tr>
  39.  <tr>
  40.   <td width="99%">
  41.   <form method="POST" action="action.php">
  42.    <table border="0" width="100%">
  43.     <tr>
  44.      <td><font face="Tahoma" size="2">Lister les intervenants
  45.      </font></td>
  46.      <td><select>
  47.      <option selected="selected">Par Ecole</option>
  48.      <option>Discipline</option>
  49.      <option>Localisation</option>
  50.      <option>Circonscription</option>
  51.      </select> </td>
  52.     </tr>
  53.     <tr>
  54.      <td><font face="Tahoma" size="2">Trié par</font> </td>
  55.      <td><select size="1" name="D2">
  56.      <option selected="selected">Nom</option>
  57.      <option>Numero</option>
  58.      </select> </td>
  59.     </tr>
  60.     <tr>
  61.      <td><font face="Tahoma" size="2">Sigle </font></td>
  62.      <td><select size="1" name="D3">
  63.      <option selected="selected">EMC</option>
  64.      <option>EPC</option>
  65.      <option>ECU</option>
  66.      </select></td>
  67.     </tr>
  68.     <tr>
  69.      <td><font face="Tahoma" size="2">Ecole</font></td>
  70.      <td><select size="1" name="D4">
  71.      <option selected="selected">Indéfférent</option>
  72.      <option>E1</option>
  73.      <option>E2</option>
  74.      <option>E3</option>
  75.      <option>E4</option>
  76.      </select> </td>
  77.     </tr>
  78.     <tr>
  79.      <td>&nbsp;</td>
  80.      <td>
  81.      <input type="submit" value="OK" name="B1" style="float: right"></td>
  82.     </tr>
  83.    </table>
  84.   </form>
  85.   </td>
  86.  </tr>
  87. </table>
  88. </div>


 
Comment réaliser cela ?
 
Merci.

Reply

Marsh Posté le 03-12-2009 à 01:05:07   

Reply

Marsh Posté le 03-12-2009 à 10:23:44    

Salut,
 
Vu que tu as posté ça dans HTML/CSS/Javascript, je vais te conseiller d'utiliser l'événement onChange sur la première liste. Tu appelles alors une fonction qui gérera les autres listes.
 
Si tu as besoin d'un appel à une base de données, il faut faire ça en PHP ou en Ajax.

Reply

Marsh Posté le 03-12-2009 à 23:35:43    

Pour le moment j'aimerais alimenter les listes depuis des tableau prédéfinis.
 
Les quelques codes que j'ai trouvé sur le net, proposent tous des listes vide visibles et non pas cachées !
 
 
 

Reply

Marsh Posté le 04-12-2009 à 10:32:19    

"tableau prédéfini" ça peut vouloir dire plein de choses.
 
Un truc en dur qq part dans un fichier texte ?
Une liste stockée dans le code de ta page ?
Une base de données  ?

Reply

Marsh Posté le 04-12-2009 à 11:38:54    

Une liste stockée dans le code de ta page

Reply

Marsh Posté le 04-12-2009 à 14:30:00    

Dans ce cas, utilise le onChange sur la première liste. Après, pour montrer/cacher les autres, utilise les styles d'affichage.

Reply

Marsh Posté le 05-12-2009 à 00:31:49    

Voila ce que j'ai pu bricoler, mais ça n'a pas fonctionner :
 
   

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  5.     <title>Lister les intervenants</title>
  6.             <style type="text/css">
  7.            
  8.             body {
  9.     margin: 0;
  10.     padding: 0;
  11.             }
  12.            
  13.             #global {
  14.     position:absolute;
  15.     left: 50%;
  16.     top: 50%;
  17.     width: 700px;
  18.     height: 400px;
  19.     margin-top: -200px;
  20.     margin-left: -350px;
  21.     border: 1px solid #333;
  22.     background-color: #eee;
  23.             }
  24.             #liste {
  25.     width: 280px;
  26.     left: 10%;
  27.     top: 10%;
  28.     position: relative;
  29.             }
  30.             .titre{
  31.              color: #FFF;
  32.              font-family: Tahoma;
  33.              font-size: 12px;
  34.              background-color: #0000FF;
  35.              text-align: center;
  36.             }
  37.             .etq{
  38.              font-family: Tahoma;
  39.              color: #000;
  40.              font-size: 12px;
  41.              text-align: left;
  42.              width: 120px;
  43.              display: inline-block;
  44.             }
  45.             .chp {text-align: left ;}
  46.             .bouton {float: right ; background:red;}
  47.             .tbl { border: 1px solid #0000FF;width:98%}
  48.             </style>
  49.  
  50.             <script type="text/javascript" language="javascript">
  51.        
  52.          var liste_4_0 = ["E1","E2","E4"];
  53.             var liste_4_1 = ["théâtre","informatique","langue vivante"];
  54.             var liste_4_2 = ["Congnac la ville","Bussines","St-Junien"];
  55.          var liste_4_3 = ["BELLAC","LIMOGES I","LIMOGES II"];
  56.             var liste_4 = [liste_4_0,liste_4_1,liste_4_2,liste_4_3];
  57.        
  58.             function fill_list_choice(next_list, valAAfficher){
  59.           //alert("Valeur à afficher : "+valAAfficher);
  60.                 if(valAAfficher === "-1" ){
  61.               return;
  62.              }
  63.              switch(next_list){
  64.               case "liste_4" :
  65.                var liste = liste_4[valAAfficher];
  66.                var next_list = document.getElementById(next_list);
  67.                var opt, child, j=0;
  68.                // On supprime les éléments qui y sont pour l'instant
  69.                while(child = next_list.childNodes[0]){
  70.                 next_list.removeChild(child);
  71.                }
  72.                // On créé la liste voulue
  73.                opt = document.createElement("option" );
  74.                opt.innerHTML = "Indifferent";
  75.                next_list.appendChild(opt);
  76.                for(var i = 0, l = liste.length;i<l;i++){
  77.                 opt = document.createElement("option" );
  78.                 opt.innerHTML = liste[i];
  79.                 opt.value = i;
  80.                 next_list.appendChild(opt);
  81.                }
  82.                  break;
  83.              
  84.                      
  85.               default:
  86.                alert("Liste inconnue" );
  87.                return;
  88.              }
  89.           afficherAutres;
  90.             }
  91.             function afficherAutres() {
  92.               var l2 = document.getElementById("liste2" );
  93.               var l3 = document.getElementById("liste3" );
  94.               var l4 = document.getElementById("liste4" );
  95.               var Sb = document.getElementById("submt" );
  96.            
  97.             if (document.gie.liste_1.value != "-1" )
  98.               {
  99.                if (l2.style.display == "none" )
  100.               l2.style.display = "block";
  101.            
  102.                if (l3.style.display == "none" )
  103.               l3.style.display = "block";
  104.          
  105.           if (l4.style.display == "none" )
  106.               l4.style.display = "block";
  107.          
  108.           if (Sb.style.display == "none" )
  109.               Sb.style.display = "block";
  110.               }
  111.               else
  112.               {
  113.                l2.style.display = "none";
  114.              l3.style.display = "none";
  115.           l4.style.display = "none";
  116.           Sb.style.display = "none";
  117.               }
  118.             }
  119.             </script>
  120.            
  121.             </head>
  122.             <body>
  123.             <div id="global">
  124.             <div id="liste">
  125.             <table class="tbl" style="width: 98%">
  126.               <tbody>
  127.               <tr>
  128.                <td class="titre">Lister les intervenants</td>
  129.               </tr>
  130.               <tr>
  131.                <td>
  132.                <form name=gie" action="" method="post">
  133.             <div id="list1">
  134.             <span class="etq">Lister les intervenants</span>
  135.             <select id="liste_1" name="liste_1" onchange="fill_list_choice('liste_4', this.value);">
  136.                   <option value="-1">Selectionner</option>
  137.                   <option value="1">Par Ecole</option>
  138.                   <option value="2">Par Discipline</option>
  139.                   <option value="3">Par Localisation</option>
  140.                   <option value="4">Par Circonscription</option>
  141.                   </select>
  142.             </div>
  143.             <div id="liste2" style="display:none;">
  144.             <span class="etq">Trié par</span>
  145.            
  146.             <select id="liste_2" name="list_2">
  147.                   <option selected="selected" value="nomint">Nom</option>
  148.                   <option value="numagr">Numéro agr.</option>
  149.                   </select>
  150.                   </div>
  151.             <div id="liste3" style="display:none;">
  152.             <span class="etq">Sigle</span>
  153.            
  154.             <select id="liste_3" name="liste_3">
  155.                   <option selected="selected" value="EMC">EMC</option>
  156.                   <option value="EPC">EPC</option>
  157.                   <option value="ECU">ECU</option>
  158.                   </select></div>
  159.             <div id="liste4" style="display:none;">
  160.             <span class="etq">Ecole</span>
  161.             <select id="liste_4" name="liste_4">
  162.                   <option>Indifferent</option>
  163.                   </select>
  164.             </div>
  165.            
  166.             <div id="submt" style="display:none;">
  167.             <span class="etq"></span>
  168.             <input class="bouton" name="B1" style="border: solid; float: right; background-color: #FF0000; font-size: x-small;" type="submit" value="OK" />
  169.             </div>
  170.             </form>
  171.                </td>
  172.               </tr>
  173.              </tbody>
  174.              </table>
  175.            
  176.             </div>
  177.             </div>
  178.             </body>
  179.            
  180.             </html>


Message édité par apz le 05-12-2009 à 00:43:04
Reply

Marsh Posté le 05-12-2009 à 14:47:25    

Pourquoi la fonction fille_list_choice ne fonctionne pas ?

Reply

Marsh Posté le 07-12-2009 à 14:43:32    

voila un autre code, il ne manque que quelques corrections pour qu'il fonctionne :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html> 
  4. <head> 
  5. <title>Lister les intervenants</title> 
  6. <style type="text/css"> 
  7.              
  8.             body { 
  9.                 margin: 0; 
  10.                 padding: 0; 
  11.             } 
  12.              
  13.             #global { 
  14.                 position:absolute; 
  15.                 left: 50%; 
  16.                 top: 50%; 
  17.                 width: 700px; 
  18.                 height: 400px; 
  19.                 margin-top: -200px;  
  20.                 margin-left: -350px;  
  21.                 border: 1px solid #333; 
  22.                 background-color: #eee; 
  23.             } 
  24.             #liste { 
  25.                 width: 280px;  
  26.                 left: 10%; 
  27.                 top: 10%; 
  28.                 position: relative; 
  29.             } 
  30.             .titre{ 
  31.                 color: #FFF; 
  32.                 font-family: Tahoma; 
  33.                 font-size: 12px; 
  34.                 background-color: #0000FF; 
  35.                 text-align: center; 
  36.             } 
  37.             .etq{ 
  38.                 font-family: Tahoma; 
  39.                 color: #000; 
  40.                 font-size: 12px; 
  41.                 text-align: left; 
  42.                 width: 120px; 
  43.                 display: inline-block; 
  44.             } 
  45.             .chp {text-align: left ;} 
  46.             .bouton {float: right ;    background:red;} 
  47.             .tbl {    border: 1px solid #0000FF;width:280px;} 
  48.             </style> 
  49. </head> 
  50. <body> 
  51. <form name="gie" id="gie" action="" method="post"> 
  52.   <table class="tbl"> 
  53.     <tbody> 
  54.       <tr> 
  55.         <td class="titre">Lister les intervenants</td> 
  56.       </tr> 
  57.       <tr> 
  58.         <td><p id="l1"><span class="etq">Lister les intervenants</span> 
  59.             <select id="sel1" name="sel1"> 
  60.               <option value="-1" selected="selected">Selectionner</option> 
  61.               <option value="1">Par Ecole</option> 
  62.               <option value="2">Par Discipline</option> 
  63.               <option value="3">Par Localisation</option> 
  64.               <option value="4">Par Circonscription</option> 
  65.             </select> 
  66.           </p> 
  67.           <p id="l2" style="display:none;"><span class="etq">Trié par</span> 
  68.             <select id="sel2" name="sel2"> 
  69.               <option selected="selected" value="nomint">Nom</option> 
  70.               <option value="numagr">Numéro agr.</option> 
  71.             </select> 
  72.           </p> 
  73.           <p id="l3" style="display:none;"><span class="etq">Sigle</span> 
  74.             <select id="sel3" name="sel3"> 
  75.               <option selected="selected" value="EMC">EMC</option> 
  76.               <option value="EPC">EPC</option> 
  77.               <option value="ECU">ECU</option> 
  78.             </select> 
  79.           </p> 
  80.           <p id="l4"  style="display:none;"><span class="etq">Ecole</span> 
  81.             <select id="sel4" name="sel4"> 
  82.               <option>Indifferent</option> 
  83.             </select> 
  84.           </p> 
  85.           <p id="ok" style="display:none"><span class="etq"></span> 
  86.             <input class="bouton" name="B1" id="B1" style="border: solid; float: right; background-color: #FF0000; font-size: x-small; display:block" type="submit" value="ok" /> 
  87.           </p></td> 
  88.       </tr> 
  89.     </tbody> 
  90.   </table> 
  91. </form> 
  92. <script    type="text/javascript"><!-- 
  93.             var liste=new Array    ( 
  94.                 new Array    (    "Ecole1","Ecole2","Ecole3","Ecole4"    )    , 
  95.                 new Array    (    "théâtre","informatique","langue vivante"    )    , 
  96.                 new Array    (    "ville1","ville2","ville3"    ), 
  97.                 new Array    (    "zone1","zone2","zone3"    ) 
  98.                                         ); 
  99.             var s1=document.getElementById("sel1" ); 
  100.             var s4=document.getElementById("sel4" );             
  101.             s1.onchange=function() 
  102.             {     
  103.                  
  104.                 if (s1.options[s1.selectedIndex].text === "Selectionner" ) 
  105.  
  106.                 { 
  107.                     l2.style.display = "none"; 
  108.                     l3.style.display = "none"; 
  109.                     l4.style.display = "none"; 
  110.                     ok.style.display = "none";     
  111.                      
  112.                 } 
  113.                 else 
  114.                 { 
  115.                     s4.length=0; 
  116.                     s4.length=liste[s1.selectedIndex-1].length; 
  117.                     for ( var n=0; n < liste[s1.selectedIndex-1].length; n++ ) 
  118.                     {    s4.options[n].text=liste[s1.selectedIndex-1][n];    } 
  119.                      
  120.                         l2.style.display = "inline";         
  121.                         l3.style.display = "inline"; 
  122.                         l4.style.display = "inline"; 
  123.                         ok.style.display = "inline"; 
  124.                 } 
  125.             } 
  126.             --> 
  127.             </script> 
  128. </body> 
  129. </html>

Reply

Marsh Posté le 07-12-2009 à 18:57:23    

bon je me suis rendu compte qu'il falait définir le reste des variables utilisées dans le code javascript.
 
var l2=document.getElementById("l2" );
var l3=document.getElementById("l3" );
var l4=document.getElementById("l4" );
var ok=document.getElementById("ok" );
 
le tableau, j'aimerais bien le remplacer pour avoir un titre coloré (liste des intervenants) avec un cadre bleu autour du formulaire.
 
mais un probleme :  
 
pourquoi la liste s4.lenght est undefined :
 
s4.length=liste[s1.selectedIndex-1].length;
 
pourtant elle est bien remplie par :
 
liste[0] => s1.selectedIndex =1, liste[0].lenght = 4
liste[1] => s1.selectedIndex =2, liste[1].lenght = 4
liste[2] => s1.selectedIndex =3, liste[2].lenght = 3
liste[3] => s1.selectedIndex =4, liste[3].lenght = 3
 
Merci.

Reply

Marsh Posté le 07-12-2009 à 18:57:23   

Reply

Marsh Posté le 07-12-2009 à 21:54:04    

lenght != length


---------------
Blablaté par Harko
Reply

Marsh Posté le 07-12-2009 à 23:23:46    

le revoila le code après quelques corrections de frappe :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <head>
  5. <title>Lister les intervenants</title>
  6. <style type="text/css">
  7.            
  8.             body {
  9.     margin: 0;
  10.     padding: 0;
  11.             }
  12.            
  13.             #global {
  14.     position:absolute;
  15.     left: 50%;
  16.     top: 50%;
  17.     width: 700px;
  18.     height: 400px;
  19.     margin-top: -200px;
  20.     margin-left: -350px;
  21.     border: 1px solid #333;
  22.     background-color: #eee;
  23.             }
  24.             #liste {
  25.     width: 280px;
  26.     left: 10%;
  27.     top: 10%;
  28.     position: relative;
  29.             }
  30.             .titre{
  31.              color: #FFF;
  32.              font-family: Tahoma;
  33.              font-size: 12px;
  34.              background-color: #0000FF;
  35.              text-align: center;
  36.             }
  37.             .etq{
  38.     padding-left : 5px;
  39.              font-family: Tahoma;
  40.              color: #000;
  41.              font-size: 12px;
  42.              text-align: left;
  43.              width: 120px;
  44.              display: inline-block;
  45.             }
  46.             .chp {text-align: left ;}
  47.             .bouton {float: right ; background:red;}
  48.             .tbl { border: 1px solid #0000FF;width:280px;}
  49.             </style>
  50. </head>
  51. <body>
  52. <form name="gie" id="gie" action="" method="post">
  53.   <table class="tbl">
  54.     <tbody>
  55.       <tr>
  56.         <td class="titre">Lister les intervenants</td>
  57.       </tr>
  58.       <tr>
  59.         <td><div id="l1">
  60.    <span class="etq">Lister les intervenants</span>
  61.             <select id="sel1" name="sel1">
  62.               <option selected="selected">Selectionner</option>
  63.               <option value="1">Par Ecole</option>
  64.               <option value="2">Par Discipline</option>
  65.               <option value="3">Par Localisation</option>
  66.               <option value="4">Par Circonscription</option>
  67.             </select>
  68.           </div>
  69.           <div id="l2" style="display:none;">
  70.    <span class="etq">Trié par</span>
  71.             <select id="sel2" name="sel2">
  72.               <option selected="selected" value="nomint">Nom</option>
  73.               <option value="numagr">Numéro agr.</option>
  74.             </select>
  75.           </div>
  76.           <div id="l3" style="display:none;">
  77.    <span class="etq">Sigle</span>
  78.             <select id="sel3" name="sel3">
  79.               <option selected="selected" value="EMC">EMC</option>
  80.               <option value="EPC">EPC</option>
  81.               <option value="ECU">ECU</option>
  82.             </select>
  83.           </div>
  84.           <div id="l4"  style="display:none;">
  85.    <span class="etq">Ecole</span>
  86.             <select id="sel4" name="sel4">
  87.               <option> </option>
  88.             </select>
  89.           </div>
  90.           <div id="ok" style="display:none;">
  91.    <span class="etq"> </span>
  92.             <input class="bouton" name="B1" id="B1" style="border: solid; float: right; background-color: #FF0000; font-size: x-small; display:block" type="submit" value="ok" />
  93.           </div></td>
  94.       </tr>
  95.     </tbody>
  96.   </table>
  97. </form>
  98. <script type="text/javascript"><!--
  99.    var liste=new Array (
  100.     new Array ( "Ecole1","Ecole2","Ecole3","Ecole4" ) ,
  101.     new Array ( "théâtre","informatique","langue vivante" ) ,
  102.     new Array ( "ville1","ville2","ville3" ),
  103.     new Array ( "zone1","zone2","zone3" )
  104.           );
  105.    var s1=document.getElementById("sel1" );
  106.    var s4=document.getElementById("sel4" ); 
  107.    var l2=document.getElementById("l2" );
  108.    var l3=document.getElementById("l3" );
  109.    var l4=document.getElementById("l4" );
  110.    var ok=document.getElementById("ok" );
  111.  
  112.    s1.onchange=function()
  113.    {
  114.    
  115.     if (s1.options[s1.selectedIndex].text === "Selectionner" )
  116.     {
  117.      l2.style.display = "none";
  118.      l3.style.display = "none";
  119.      l4.style.display = "none";
  120.      ok.style.display = "none";
  121.     }
  122.     else
  123.     {
  124.      s4.length=0;
  125.      s4.length=liste[s1.selectedIndex-1].length;
  126.      s4.options[0].text="Indifferent";
  127.      for ( var n=1; n <= liste[s1.selectedIndex-1].length); n++ )
  128.      {
  129.       s4.options[n].text=liste[s1.selectedIndex-1][n-1];
  130.      }
  131.  
  132.      l2.style.display = "inline"; 
  133.      l3.style.display = "inline";
  134.      l4.style.display = "inline";
  135.      ok.style.display = "inline";
  136.    
  137.     }
  138.    }
  139.    -->
  140.    </script>
  141. </body>
  142. </html>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed