Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1425 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Gestion de Select liés

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Gestion de Select liés

n°1946773
apz
Posté le 03-12-2009 à 01:05:07  profilanswer
 

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.

mood
Publicité
Posté le 03-12-2009 à 01:05:07  profilanswer
 

n°1946814
Fred999
Rabat-joie
Posté le 03-12-2009 à 10:23:44  profilanswer
 

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.

n°1947156
apz
Posté le 03-12-2009 à 23:35:43  profilanswer
 

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 !
 
 
 

n°1947242
Fred999
Rabat-joie
Posté le 04-12-2009 à 10:32:19  profilanswer
 

"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  ?

n°1947303
apz
Posté le 04-12-2009 à 11:38:54  profilanswer
 

Une liste stockée dans le code de ta page

n°1947387
Fred999
Rabat-joie
Posté le 04-12-2009 à 14:30:00  profilanswer
 

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

n°1947527
apz
Posté le 05-12-2009 à 00:31:49  profilanswer
 

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
n°1947552
apz
Posté le 05-12-2009 à 14:47:25  profilanswer
 

Pourquoi la fonction fille_list_choice ne fonctionne pas ?

n°1947918
apz
Posté le 07-12-2009 à 14:43:32  profilanswer
 

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>

n°1948130
apz
Posté le 07-12-2009 à 18:57:23  profilanswer
 

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.

mood
Publicité
Posté le 07-12-2009 à 18:57:23  profilanswer
 

n°1948173
gatsu35
Blablaté par Harko
Posté le 07-12-2009 à 21:54:04  profilanswer
 

lenght != length


---------------
Blablaté par Harko
n°1948197
apz
Posté le 07-12-2009 à 23:23:46  profilanswer
 

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>


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Gestion de Select liés

 

Sujets relatifs
Problème de gestion de la liaison série RS232 en VHDL[Oracle] Gestion des index
Select + XMLHttpRequest + variable de session[xsl]gestion du retour chariot dans une variable string
Select lié en JS+PHP : problème avec IEgestion des erreurs dans un code word
Gestion d'erreurs php - comment tout cacher ?[JQuery] val() avec select multiple
Gestion de version d'un articleProblème requête select avec double résultats
Plus de sujets relatifs à : Gestion de Select liés

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.190 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR