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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [JS] 2 menus déroulants dynamiques

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[JS] 2 menus déroulants dynamiques

n°299854
urd-sama
waste of space
Posté le 03-02-2003 à 11:19:59  profilanswer
 

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  :)

mood
Publicité
Posté le 03-02-2003 à 11:19:59  profilanswer
 

n°299858
VenerZen
M - D - M
Posté le 03-02-2003 à 11:24:20  profilanswer
 

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;
}

n°299864
urd-sama
waste of space
Posté le 03-02-2003 à 11:32:52  profilanswer
 

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

n°299878
VenerZen
M - D - M
Posté le 03-02-2003 à 11:45:28  profilanswer
 

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.  
 

n°300081
urd-sama
waste of space
Posté le 03-02-2003 à 13:49:12  profilanswer
 

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?

n°300146
VenerZen
M - D - M
Posté le 03-02-2003 à 14:23:22  profilanswer
 

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

n°300160
urd-sama
waste of space
Posté le 03-02-2003 à 14:37:02  profilanswer
 

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

n°303631
urd-sama
waste of space
Posté le 07-02-2003 à 08:16:59  profilanswer
 

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

n°309072
urd-sama
waste of space
Posté le 14-02-2003 à 07:53:38  profilanswer
 

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  :)

n°309708
weed
Posté le 14-02-2003 à 16:48:48  profilanswer
 

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>  
 
 

mood
Publicité
Posté le 14-02-2003 à 16:48:48  profilanswer
 

n°309710
fastclemmy
(re-)Dictateur en plastique
Posté le 14-02-2003 à 16:49:35  profilanswer
 
n°311341
urd-sama
waste of space
Posté le 17-02-2003 à 16:17:11  profilanswer
 

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:

n°322259
urd-sama
waste of space
Posté le 04-03-2003 à 08:27:02  profilanswer
 

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]

n°323156
urd-sama
waste of space
Posté le 05-03-2003 à 09:21:31  profilanswer
 

up  [:tinostar]

n°325691
urd-sama
waste of space
Posté le 07-03-2003 à 09:41:29  profilanswer
 

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

n°326981
weed
Posté le 08-03-2003 à 23:57:44  profilanswer
 

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

n°326984
urd-sama
waste of space
Posté le 09-03-2003 à 00:00:51  profilanswer
 

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 :.
n°328371
walli
Posté le 10-03-2003 à 16:05:48  profilanswer
 

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 ?

n°328376
urd-sama
waste of space
Posté le 10-03-2003 à 16:09:22  profilanswer
 

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"

n°328387
walli
Posté le 10-03-2003 à 16:12:49  profilanswer
 

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...)

n°328396
urd-sama
waste of space
Posté le 10-03-2003 à 16:15:21  profilanswer
 

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

n°328404
walli
Posté le 10-03-2003 à 16:19:40  profilanswer
 

Urd-sama a écrit :

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


 
de rien

n°329382
urd-sama
waste of space
Posté le 11-03-2003 à 11:50:03  profilanswer
 

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:

mood
Publicité
Posté le   profilanswer
 


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

  [JS] 2 menus déroulants dynamiques

 

Sujets relatifs
Projet URGENT: menus imbriquésCopie de menus Word depuis une application VBA
Afficher des données dynamiques sur plusieurs pagesdeux menus interactifs
[ASP] - graphiques dynamiques[HTML,JS] Ma fenêtre principale sans barres d'adresses, de menus ?
a propos des menus dans les sites web[VBA] -> Modifier Menus de Word ?
comment imbriquer des menus .....? [RESOLU][VISUAL C++] [MFC] Les menus
Plus de sujets relatifs à : [JS] 2 menus déroulants dynamiques


Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)