2 menus déroulants dynamiques [JS] - HTML/CSS - Programmation
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;
}
Marsh Posté le 03-02-2003 à 11:32:52
ouah la vache!
je regarderai en détail + tard, déjà que j'ai un mal de tete pas possible... merci pour l'info en tout cas
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.
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?
Marsh Posté le 03-02-2003 à 14:23:22
Voui mais les éléments important sont là.
Courant de la semaine si tu veux...
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)
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
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> |
pour remplir un tableaau javascript depuis une requête via ASP, par exemple pour le tableau pays
Citation : <script language="javascript"> |
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
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
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
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
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. |
ta valeur selected de ta liste B, elle depend bien de ta valeur selected de ta liste A ?
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"
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 |
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...)
Marsh Posté le 10-03-2003 à 16:19:40
ReplyMarsh 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
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
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