[JS] 2 menus déroulants dynamiques

2 menus déroulants dynamiques [JS] - HTML/CSS - Programmation

Marsh Posté le 03-02-2003 à 11:19:59    

mon problème est simple, mais je n'arrive pas à trouver de solution simple sur le web.
j'ai 2 menus déroulants l'un a coté de l'autre, et j'aimerais que le 2e affiche les données inérentes au premier.
 
En plus clair:
si A = 1, B propose a,b,c
si A = 2, B propose d,e
si A = 3, B propose f,g,h,i
etc.
 
comme je ne connais pratiquement rien à javascript, je me permets de vous solliciter  :)

Reply

Marsh Posté le 03-02-2003 à 11:19:59   

Reply

Marsh Posté le 03-02-2003 à 11:24:20    

Tient, voilà un truc dont tu peux t'inspirer.
Ca permet de passer des valeurs d'un select à l'autre, donc tu copies et tu adapte en gardant le principe, pis c'est bon.
 
function ajout_elements(Nom_Liste_Ajout, Nom_Liste_Origine, Nom_Champ_Liste_Elem)
{
 // Ajout dans : 'Nom_Liste_Ajout' des éléments de la liste 'Nom_Liste_Origine'
 // La liste des clés est à récupérer dans un champs hidden 'Nom_Champ_Liste_Elem'
 while(document.Infos.elements[Nom_Liste_Origine].selectedIndex != '-1';)
 {
  i=0;
  trouve = "non";
  while( trouve == "non" )
  {
   if( document.Infos.elements[Nom_Liste_Ajout].options[i] == null)
   {
    trouve = "vide" ;
   }
   else
   {
    if(document.Infos.elements[Nom_Liste_Ajout].options[i].value == document.Infos.elements[Nom_Liste_Origine].options[document.Infos.elements[Nom_Liste_Origine].selectedIndex].value)
    {
     trouve = "oui";
    }
   }
   i++;
  }
  if( trouve != "oui" )
  {
   document.Infos.elements[Nom_Liste_Ajout].options[document.Infos.elements[Nom_Liste_Ajout].length] = new Option(document.Infos.elements[Nom_Liste_Origine].options[document.Infos.elements[Nom_Liste_Origine].selectedIndex].text, document.Infos.elements[Nom_Liste_Origine].options[document.Infos.elements[Nom_Liste_Origine].selectedIndex].value, false, false);
   AddElem(document.Infos.elements[Nom_Liste_Origine].options[document.Infos.elements[Nom_Liste_Origine].selectedIndex].value, 'ajouter', Nom_Champ_Liste_Elem);
  }
  document.Infos.elements[Nom_Liste_Origine].options[document.Infos.elements[Nom_Liste_Origine].selectedIndex].selected = false;
 }
}
function suppression_elements(Nom_Liste_Suppression, Nom_Champ_Liste_Elem)
{
 while(document.Infos.elements[Nom_Liste_Suppression].selectedIndex != -1)
 {
  if( document.Infos.elements[Nom_Liste_Suppression].options[document.Infos.elements[Nom_Liste_Suppression].selectedIndex].value != -1)
  {
   AddElem(document.Infos.elements[Nom_Liste_Suppression].options[document.Infos.elements[Nom_Liste_Suppression].selectedIndex].value, 'supprimer', Nom_Champ_Liste_Elem);
   document.Infos.elements[Nom_Liste_Suppression].options[document.Infos.elements[Nom_Liste_Suppression].selectedIndex] = null;
  }
  else
  {
   document.Infos.elements[Nom_Liste_Suppression].options[document.Infos.elements[Nom_Liste_Suppression].selectedIndex].selected = false ;
  }
 }
}
function AddElem(Element, Action, Nom_Du_Champ)
{
 // je récupère les valeurs
 value_temp=document.Infos.elements[Nom_Du_Champ].value;
 // je les traite
 switch(Action)
 {
  case 'ajouter':
   if(value_temp.length > 0)
   {
    value_temp=value_temp+","+Element;
   }
   else
   {
    value_temp=value_temp+Element;
   }
  break
  case 'supprimer':
   texte_recherche = Element;
   value_temp = value_temp.replace( texte_recherche, "" ) ;
   value_temp = value_temp.replace( ",," , "," ) ;
   value_temp = value_temp.replace( /,$/ig , "" ) ;
   value_temp = value_temp.replace( /^,/ig , "" ) ;
  break
 }
 // je remet les valeurs
 document.Infos.elements[Nom_Du_Champ].value=value_temp;
}

Reply

Marsh Posté le 03-02-2003 à 11:32:52    

ouah la vache!  :ouch:  
je regarderai en détail + tard, déjà que j'ai un mal de tete pas possible... merci pour l'info en tout cas

Reply

Marsh Posté le 03-02-2003 à 11:45:28    

C'est simple en fait. J'ai pas le temps de t'en faire une explication en détail, mais si tu lis le code tu verras tout de suite comment résoudre ton problême.  
 

Reply

Marsh Posté le 03-02-2003 à 13:49:12    

j'ai vraiment pas l'habitude de cette syntaxe... tu pourrais pas me faire une version "light"? il me semble que ta solution est très (voir trop dans mon cas) complète non?

Reply

Marsh Posté le 03-02-2003 à 14:23:22    

Voui mais les éléments important sont là.
Courant de la semaine si tu veux...

Reply

Marsh Posté le 03-02-2003 à 14:37:02    

ou alors explique moi les étapes en quelques mots, ca m'aiderait déjà beaucoup (si tu as un peu de temps bien sur)

Reply

Marsh Posté le 07-02-2003 à 08:16:59    

si tu repasses par là, ne m'oublie pas  :jap:

Reply

Marsh Posté le 14-02-2003 à 07:53:38    

je me permets de upper tout ca, si qqun peut me dire en 2-3 mots ce que ce charabia réalise (un schéma bloc du truc quoi).
pour le reste je me débrouillerai  :)

Reply

Marsh Posté le 14-02-2003 à 16:48:48    

je ne sais si ca peut t'aider :  
Listes déroulantes liées entre elles que j'ai trouvé sur le net
 
   
 
 

Citation :

html>  
<head>  
<script language="javascript">  
var pays = new Array; //nouveau tableau  
pays[0] = new Array("p0", "pays0" ); //nouveau tableau, on va donc avoir pays[0][0]="p0"  
pays[1] = new Array("p1", "pays1" );  
pays[2] = new Array("p2", "pays2" );  
 
var ville=new Array;  
// pays0  
ville["p0"] = new Array;  
ville["p0"][0] = new Array("p0v0", "pays0-ville0" );  
ville["p0"][1] = new Array("p0v1", "pays0-ville1" );  
 
//pays1  
ville["p1"]=new Array;  
ville["p1"][0] = new Array("p1v0", "pays1-ville0" );  
ville["p1"][1] = new Array("p1v1", "pays1-ville1" );  
 
//pays2  
ville["p2"] = new Array;  
ville["p2"][0] = new Array("p2v0", "pays2-ville0" );  
ville["p2"][1] = new Array("p2v1", "pays2-ville1" );  
 
 
var rue = new Array;  
//pays0-ville0  
rue["p0v0"] = new Array;  
rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0" );  
rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1" );  
 
//pays0-ville1  
rue["p0v1"] = new Array;  
rue["p0v1"][0] = new Array("p0v1r0", "pays0-ville1-rue0" );  
rue["p0v1"][1] = new Array("p0v1r1", "pays0-ville1-rue1" );  
rue["p0v1"][2] = new Array("p0v1r2", "pays0-ville1-rue2" );  
 
 
//pays1-ville0  
rue["p1v0"] = new Array;  
rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0" );  
rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1" );  
 
//pays1-ville1  
rue["p1v1"] = new Array;  
rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0" );  
rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1" );  
 
 
//pays2-ville0  
rue["p2v0"] = new Array;  
rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0" );  
rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1" );  
 
//pays1-ville1  
rue["p2v1"] = new Array;  
rue["p2v1"][0] = new Array("p2v1r0", "pays2-ville1-rue0" );  
rue["p2v1"][1] = new Array("p2v1r1", "pays2-ville1-rue1" );  
rue["p2v1"][2] = new Array("p2v1r2", "pays2-ville1-rue2" );  
 
 
 
function filltheselect(liste, choix)  
{switch (liste)  
   {  
   case "listepays":  
      raz("listeville" );  
      raz("listerue" );  
      for (i=0; i<ville[choix].length; i++)  
         {  
         new_option = new Option(ville[choix][i][1],ville[choix][i][0]);  
           
 
document.formu.elements["listeville"].options[document.formu.elements["listeville"].length]=new_option;  
         }  
      for (i=0; i<rue[choix+"v0"].length; i++)  
         {  
         new_option = new Option(rue[choix+"v0"][i][1],rue[choix+"v0"][i][0]);  
           
 
document.formu.elements["listerue"].options[document.formu.elements["listerue"].length]=new_option;  
         }  
      break;  
   case "listeville":  
      raz("listerue" );  
      for (i=0; i<rue[choix].length; i++)  
         {  
         new_option = new Option(rue[choix][i][1],rue[choix][i][0]);  
           
 
document.formu.elements["listerue"].options[document.formu.elements["listerue"].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 un pays  
<select name="listepays" onChange="javascript:filltheselect(this.name, this.value)">  
   <script language="javascript">  
   for (i=0; i<pays.length; i++)  
      document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);  
   </script>  
</select>  
<br>  
 
Choisir une ville  
<select name="listeville" onChange="javascript:filltheselect(this.name, this.value)">  
   <script language="javascript">  
   for (i=0; i<ville["p0"].length; i++)  
      document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]);  
   </script>  
</select>  
<br>  
 
Choisir une rue  
<select name="listerue">  
   <script language="javascript">  
   for (i=0; i<rue["p0v0"].length; i++)  
      document.write("<option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);  
   </script>  
</select>  
 
</form>  
</body>  
</html>


 
 
pour remplir un tableaau javascript depuis une requête via ASP, par exemple pour le tableau pays  
 
 

Citation :

<script language="javascript">  
var pays=new Array;  
<%  
sql="select chpays from tabpays"  
set rs=conn.execute (sql)  
i=0  
while not rs.eof%>  
pays[<%=i%>]=new Array("p<%=i%>", "<%=rs("chpays" )%>" );  
<%i=i+1  
rs.movenext  
wend%>  
</script>  
 
 

Reply

Marsh Posté le 14-02-2003 à 16:48:48   

Reply

Marsh Posté le 14-02-2003 à 16:49:35    

Reply

Marsh Posté le 17-02-2003 à 16:17:11    

merci extrêmement beaucoup pour tous vos exemples, je vais étudier la chose.
Vraiment un grand merci, vous m'enlever une épine du pied  :hello:

Reply

Marsh Posté le 04-03-2003 à 08:27:02    

tout marche assez bien avec la technique que j'ai utilisée, mise à part un petit problème.
Voici l'extrait de code:
 
<form name="leForm">
<script language="JavaScript" type="text/javascript">
generationListe = new Array();
generationListe[0] = '';
generationListe[1] = new Array(new Array("value", "xxx" ), new Array("Poireau", "SQL Server" ));
generationListe[2] = new Array(new Array("Banane", "yyy" ), new Array("Orange", "SQL / PL/SQL" ), new Array("value", "zzz" ));
generationListe[3] = new Array(new Array("Poulet", "www" ), new Array("Dinde", "ttt" ));
generationListe[4] = new Array(new Array("Rouge", "iii" ),  new Array("Vert", "jjj" ));
generationListe[5] = new Array(new Array("France", "kkk" ));
var generationChoixA;
function generationChangerListeB(leForm)
{
      var B = leForm.generationListeB;
      var taille = B.options.length;
      for(var i=1; i < taille ; i++)
      {
            B.options[1] = null;
      }
      for(var i=0; i < generationListe[generationChoixA].length; i++)
      {
            var opt = new Option(generationListe[generationChoixA][i][1], generationListe[generationChoixA][i][0]);
            B.options[B.options.length] = opt;
      }
      B.focus();
}
</script>
<div class=PosDeroul><p><a href="index.htm" target="_top">Lien home</a> >
<select name="generationListeA" onchange="generationChoixA=this.selectedIndex; generationChangerListeB(this.form)">
      <option>-- Please Select --</option>
      <option value="DB">DB/SGBD</option>
      <option value="Languages">Languages</option>
      <option value="Softwares">Softwares</option>
      <option selected value="Methods">Methods</option>
      <option value="Misc">Miscellaneous</option>
</select>
<select name="generationListeB">
      <option>-- Please Select --</option>
</select>
<input type="button" value="Go">
</form></p></div>
 
Mon problème est donc que j'aimerais mettre une valeur en selected en arrivant sur la page (celle-ci sera déterminée par un futur script asp). J'arrive à mettre pour la première liste, mais pour la deuxième je ne sais pas ou je dois placer cet argument. Est-ce dans la génération du tableau ou plus tard? Merci pour votre aide  [:sadbutsad]

Reply

Marsh Posté le 05-03-2003 à 09:21:31    

up  [:tinostar]

Reply

Marsh Posté le 07-03-2003 à 09:41:29    

bah c'est si compliqué que ca?  :??:  

Reply

Marsh Posté le 08-03-2003 à 23:57:44    

arf dsl je peux pas trop t'aider parce que le JS ca me prend la tete en ce moment  
 
si tu y arrive pas, essaie de le faire en PHP, ca sera plus facile tu lit ds une table MYSQL c tt con ..... a moins que tu ne connaisse pas le PHP et le tres puissant SQL

Reply

Marsh Posté le 09-03-2003 à 00:00:51    

je peux pas, c'est un événement onclick dans la page...
tout le reste du projet est en asp, mais ce truc-là je suis obligée de le faire en jscript (et ca m'enchante pas non plus mais bon).
j'ai encore le temps, je suis au stade du prototype pour le moment, ca me laisse de la marge


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
Reply

Marsh Posté le 10-03-2003 à 16:05:48    

Urd-sama a écrit :

tout marche assez bien avec la technique que j'ai utilisée, mise à part un petit problème.
Voici l'extrait de code:
...  
Mon problème est donc que j'aimerais mettre une valeur en selected en arrivant sur la page (celle-ci sera déterminée par un futur script asp). J'arrive à mettre pour la première liste, mais pour la deuxième je ne sais pas ou je dois placer cet argument. Est-ce dans la génération du tableau ou plus tard? Merci pour votre aide  [:sadbutsad]  


 
ta valeur selected de ta liste B, elle depend bien de ta valeur selected de ta liste A ?

Reply

Marsh Posté le 10-03-2003 à 16:09:22    

en donnant une valeur à A (clic), il va charger les valeurs correspondantes dans B
si A n'a aucune valeur, il affiche uniquement "please select"

Reply

Marsh Posté le 10-03-2003 à 16:12:49    

Urd-sama a écrit :

en donnant une valeur à A (clic), il va charger les valeurs correspondantes dans B
si A n'a aucune valeur, il affiche uniquement "please select"


et bien si tu arrives a mettre une valeur selected par defaut dans ta liste A, au chargement de ta page, tu fais appel a ta fonction generationListeB avec pour parametre ta value selected de ta liste A (que tu connais...)

Reply

Marsh Posté le 10-03-2003 à 16:15:21    

je jette un oeil demain, merci déjà pour le conseil

Reply

Marsh Posté le 10-03-2003 à 16:19:40    

Urd-sama a écrit :

je jette un oeil demain, merci déjà pour le conseil


 
de rien

Reply

Marsh Posté le 11-03-2003 à 11:50:03    

voilà j'ai pris un moment à étudier le problème, et j'ai cherché midi à 14 heures  :sweat:  
 
j'ai trouvé une solution simple, qui se situe à ce niveau:
 
<select name="generationListeB">
      <option>--Please Select--</option>
</select>
 
En fait cette option-la viendra automatiquement en selected. Donc il suffira que je fasse une condition if dans mon futur script asp. Si j'ai un paramètre, ce paramètre en option. Sinon Please Select.
 
Merci  :jap:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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