|
[ Forums >> Webmasters >> Général >> Gestion de listes liées ]
| > Gestion de listes liées |
[ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 05-12-2009 à 02:24 | 9 messages ]
|
Bonjour,
Dans un formulaire, j'ai quatres listes dont les trois dernières sont cachées.
J'aimerais afficher les trois listes avec une création dynamique de la quatrième liste et cela, selon le choix sélectionner dans la premiere liste.
Voila ce que j'ai pu bricoler :
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Lister les intervenants</title> <style type="text/css"> body { margin: 0; padding: 0; } #global { position:absolute; left: 50%; top: 50%; width: 700px; height: 400px; margin-top: -200px; margin-left: -350px; border: 1px solid #333; background-color: #eee; } #liste { width: 280px; left: 10%; top: 10%; position: relative; } .titre{ color: #FFF; font-family: Tahoma; font-size: 12px; background-color: #0000FF; text-align: center; } .etq{ font-family: Tahoma; color: #000; font-size: 12px; text-align: left; width: 120px; display: inline-block; } .chp {text-align: left ;} .bouton {float: right ; background:red;} .tbl { border: 1px solid #0000FF;width:98%} </style> <script type="text/javascript" language="javascript"> var liste_4_0 = ["E1","E2","E4"]; var liste_4_1 = ["théâtre","informatique","langue vivante"]; var liste_4_2 = ["Congnac la ville","Bussines","St-Junien"]; var liste_4_3 = ["BELLAC","LIMOGES I","LIMOGES II"]; var liste_4 = [liste_4_0,liste_4_1,liste_4_2,liste_4_3]; function fill_list_choice(next_list, valAAfficher){ //alert("Valeur à afficher : "+valAAfficher); if(valAAfficher === "-1"){ return; } switch(next_list){ case "liste_4" : var liste = liste_4[valAAfficher]; var next_list = document.getElementById(next_list); var opt, child, j=0; // On supprime les éléments qui y sont pour l'instant while(child = next_list.childNodes[0]){ next_list.removeChild(child); } // On créé la liste voulue opt = document.createElement("option"); opt.innerHTML = "Indifferent"; next_list.appendChild(opt); for(var i = 0, l = liste.length;i<l;i++){ opt = document.createElement("option"); opt.innerHTML = liste; opt.value = i; next_list.appendChild(opt); } break; default: alert("Liste inconnue"); return; } afficherAutres; } function afficherAutres() { var l2 = document.getElementById("liste2"); var l3 = document.getElementById("liste3"); var l4 = document.getElementById("liste4"); var Sb = document.getElementById("submt"); if (document.gie.liste_1.value != "-1") { if (l2.style.display == "none") l2.style.display = "block"; if (l3.style.display == "none") l3.style.display = "block"; if (l4.style.display == "none") l4.style.display = "block"; if (Sb.style.display == "none") Sb.style.display = "block"; } else { l2.style.display = "none"; l3.style.display = "none"; l4.style.display = "none"; Sb.style.display = "none"; } } </script> </head> <body> <div id="global"> <div id="liste"> <table class="tbl" style="width: 98%"> <tbody> <tr> <td class="titre">Lister les intervenants</td> </tr> <tr> <td> <form name=gie" action="" method="post"> <div id="list1"> <span class="etq">Lister les intervenants</span> <select id="liste_1" name="liste_1" onchange="fill_list_choice('liste_4', this.value);"> <option value="-1">Selectionner</option> <option value="1">Par Ecole</option> <option value="2">Par Discipline</option> <option value="3">Par Localisation</option> <option value="4">Par Circonscription</option> </select> </div> <div id="liste2" style="display:none;"> <span class="etq">Trié par</span> <select id="liste_2" name="list_2"> <option selected="selected" value="nomint">Nom</option> <option value="numagr">Numéro agr.</option> </select> </div> <div id="liste3" style="display:none;"> <span class="etq">Sigle</span> <select id="liste_3" name="liste_3"> <option selected="selected" value="EMC">EMC</option> <option value="EPC">EPC</option> <option value="ECU">ECU</option> </select></div> <div id="liste4" style="display:none;"> <span class="etq">Ecole</span> <select id="liste_4" name="liste_4"> <option>Indifferent</option> </select> </div> <div id="submt" style="display:none;"> <span class="etq"></span> <input class="bouton" name="B1" style="border: solid; float: right; background-color: #FF0000; font-size: x-small;" type="submit" value="OK" /> </div> </form> </td> </tr> </tbody> </table> </div> </div> </body> </html> |
|
Merci.
|
|
[ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 05-12-2009 à 05:09 | 2548 messages ]
Alut
t'as fait exprès de mettre ton code sur 1 seule ligne ???
c'est absolument ingérable, et pleins d'erreurs à cause de celà, les commentaires // empêchent les fonctions de... fonctionner car elles se retrouvent en... commentaire
et encore celui là çà va, le code de ton autre poste est truffé d'erreurs, il manque des ", les // n'en parlons plus, des <a href> mal imbriqué, 1 style a la place d'1 script et vice-versa
en tout cas si çà marche chez toi comme çà, chapeau, t'as 1 super navigateur (ou trop de chance)
donnes-nous 1 meilleur code, ou alors 1 url ou on peut le voir en action
Atchao
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
| [ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 05-12-2009 à 11:33 | 9 messages ]
|
Salut Alut,
Je na sais comment il s'est fait afficher sur suele ligne, mais sois sur sur que je l'ai pas fais expres 
bon j'ai passé le code sur dreamweaver, et depuis le recopier ici.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Lister les intervenants</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #333;
background-color: #eee;
}
#liste {
width: 280px;
left: 10%;
top: 10%;
position: relative;
}
.titre{
color: #FFF;
font-family: Tahoma;
font-size: 12px;
background-color: #0000FF;
text-align: center;
}
.etq{
font-family: Tahoma;
color: #000;
font-size: 12px;
text-align: left;
width: 120px;
display: inline-block;
}
.chp {text-align: left ;}
.bouton {float: right ; background:red;}
.tbl { border: 1px solid #0000FF;width:98%}
</style>
<script type="text/javascript" language="javascript">
var liste_4_0 = ["E1","E2","E4"];
var liste_4_1 = ["théâtre","informatique","langue vivante"];
var liste_4_2 = ["Congnac la ville","Bussines","St-Junien"];
var liste_4_3 = ["BELLAC","LIMOGES I","LIMOGES II"];
var liste_4 = [liste_4_0,liste_4_1,liste_4_2,liste_4_3];
function fill_list_choice(next_list, valAAfficher){
//alert("Valeur à afficher : "+valAAfficher);
if(valAAfficher === "-1"){
return;
}
switch(next_list){
case "liste_4" :
var liste = liste_4[valAAfficher];
var next_list = document.getElementById(next_list);
var opt, child, j=0;
// On supprime les éléments qui y sont pour l'instant
while(child = next_list.childNodes[0]){
next_list.removeChild(child);
}
// On créé la liste voulue
opt = document.createElement("option");
opt.innerHTML = "Indifferent";
next_list.appendChild(opt);
for(var i = 0, l = liste.length;i<l;i++){
opt = document.createElement("option");
opt.innerHTML = liste[i];
opt.value = i;
next_list.appendChild(opt);
}
break;
default:
alert("Liste inconnue");
return;
}
afficherAutres;
}
function afficherAutres() {
var l2 = document.getElementById("liste2");
var l3 = document.getElementById("liste3");
var l4 = document.getElementById("liste4");
var Sb = document.getElementById("submt");
if (document.gie.liste_1.value != "-1")
{
if (l2.style.display == "none")
l2.style.display = "block";
if (l3.style.display == "none")
l3.style.display = "block";
if (l4.style.display == "none")
l4.style.display = "block";
if (Sb.style.display == "none")
Sb.style.display = "block";
}
else
{
l2.style.display = "none";
l3.style.display = "none";
l4.style.display = "none";
Sb.style.display = "none";
}
}
</script>
</head>
<body>
<div id="global">
<div id="liste">
<table class="tbl" style="width: 98%">
<tbody>
<tr>
<td class="titre">Lister les intervenants</td>
</tr>
<tr>
<td>
<form name="gie" action="" method="post">
<div id="list1">
<span class="etq">Lister les intervenants</span>
<select id="liste_1" name="liste_1" onchange="fill_list_choice('liste_4', this.value);">
<option value="-1">Selectionner</option>
<option value="1">Par Ecole</option>
<option value="2">Par Discipline</option>
<option value="3">Par Localisation</option>
<option value="4">Par Circonscription</option>
</select>
</div>
<div id="liste2" style="display:none;">
<span class="etq">Trié par</span>
<select id="liste_2" name="list_2">
<option selected="selected" value="nomint">Nom</option>
<option value="numagr">Numéro agr.</option>
</select>
</div>
<div id="liste3" style="display:none;">
<span class="etq">Sigle</span>
<select id="liste_3" name="liste_3">
<option selected="selected" value="EMC">EMC</option>
<option value="EPC">EPC</option>
<option value="ECU">ECU</option>
</select></div>
<div id="liste4" style="display:none;">
<span class="etq">Ecole</span>
<select id="liste_4" name="liste_4">
<option>Indifferent</option>
</select>
</div>
<div id="submt" style="display:none;">
<span class="etq"></span>
<input class="bouton" name="B1" style="border: solid; float: right; background-color: #FF0000; font-size: x-small;" type="submit" value="OK" />
</div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
|
|
| [ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 05-12-2009 à 15:53 | 2548 messages ]
beaucoup moins d'erreurs
en fait je n'ai trouvé que :
* ligne 89 : il y a afficherAutres; il faut afficherAutres();
mais j'ai surement pas compris la finalité du/des script/s (si les 2 sont en relations !!!)
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
| [ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 05-12-2009 à 22:36 | 9 messages ]
salut,
le but de ce code est selon le choix effectué dans la "liste_1" affichée dans la page d'acceuil, une autre liste (liste_4) est crée automatiquement selon la selection éffectuée :
choix = 0 => la 4eme liste (liste_4) est générée est remplie par les éléments de la liste :
| var liste_4_0 = ["E1","E2","E4"]; |
|
choix = 1 => la 4eme liste sera remplie par :
| var liste_4_1 = ["théâtre","informatique","langue vivante"]; |
|
et ainsi de suite ....
Pour les listes 2 et 3 (liste_2 et liste_3), le code javascript dans mon cas, ne sert que pour les afficher/masquer.
Ca veut dire que le OnChange de la liste_1 qui commande le remplissage de la liste_4 selon le choix éffectué ensuite l'affichage/masquage des listes 2,3 et 4 dans le formulaire de page.
;)
[Message édité par apz le 05-12-2009 à 22:41]
| [ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 07-12-2009 à 15:05 | 9 messages ]
|
voila un autre code plus leger et il ne manque que quelques corrections pour qu'il fonctionne :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Lister les intervenants</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #333;
background-color: #eee;
}
#liste {
width: 280px;
left: 10%;
top: 10%;
position: relative;
}
.titre{
color: #FFF;
font-family: Tahoma;
font-size: 12px;
background-color: #0000FF;
text-align: center;
}
.etq{
font-family: Tahoma;
color: #000;
font-size: 12px;
text-align: left;
width: 120px;
display: inline-block;
}
.chp {text-align: left ;}
.bouton {float: right ; background:red;}
.tbl { border: 1px solid #0000FF;width:280px;}
</style>
</head>
<body>
<form name="gie" id="gie" action="" method="post">
<table class="tbl">
<tbody>
<tr>
<td class="titre">Lister les intervenants</td>
</tr>
<tr>
<td><p id="l1"><span class="etq">Lister les intervenants</span>
<select id="sel1" name="sel1">
<option value="-1" selected="selected">Selectionner</option>
<option value="1">Par Ecole</option>
<option value="2">Par Discipline</option>
<option value="3">Par Localisation</option>
<option value="4">Par Circonscription</option>
</select>
</p>
<p id="l2" style="display:none;"><span class="etq">Trié par</span>
<select id="sel2" name="sel2">
<option selected="selected" value="nomint">Nom</option>
<option value="numagr">Numéro agr.</option>
</select>
</p>
<p id="l3" style="display:none;"><span class="etq">Sigle</span>
<select id="sel3" name="sel3">
<option selected="selected" value="EMC">EMC</option>
<option value="EPC">EPC</option>
<option value="ECU">ECU</option>
</select>
</p>
<p id="l4" style="display:none;"><span class="etq">Ecole</span>
<select id="sel4" name="sel4">
<option>Indifferent</option>
</select>
</p>
<p id="ok" style="display:none"><span class="etq"></span>
<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" />
</p></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript"><!--
var liste=new Array (
new Array ( "Ecole1","Ecole2","Ecole3","Ecole4" ) ,
new Array ( "théâtre","informatique","langue vivante" ) ,
new Array ( "ville1","ville2","ville3" ),
new Array ( "zone1","zone2","zone3" )
);
var s1=document.getElementById("sel1");
var s4=document.getElementById("sel4");
s1.onchange=function()
{
if (s1.options[s1.selectedIndex].text === "Selectionner")
{
l2.style.display = "none";
l3.style.display = "none";
l4.style.display = "none";
ok.style.display = "none";
}
else
{
s4.length=0;
s4.length=liste[s1.selectedIndex-1].length;
for ( var n=0; n < liste[s1.selectedIndex-1].length; n++ )
{ s4.options[n].text=liste[s1.selectedIndex-1][n]; }
l2.style.display = "inline";
l3.style.display = "inline";
l4.style.display = "inline";
ok.style.display = "inline";
}
}
-->
</script>
</body>
</html> |
|
| [ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 07-12-2009 à 19:01 | 9 messages ]
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.
[Message édité par apz le 07-12-2009 à 19:02]
| [ Posté par apz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 07-12-2009 à 23:26 | 9 messages ]
|
il y'avait quelques fautes de frappe, mais ça ne fonctionne toujours pas. Bizzare !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Lister les intervenants</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 700px;
height: 400px;
margin-top: -200px;
margin-left: -350px;
border: 1px solid #333;
background-color: #eee;
}
#liste {
width: 280px;
left: 10%;
top: 10%;
position: relative;
}
.titre{
color: #FFF;
font-family: Tahoma;
font-size: 12px;
background-color: #0000FF;
text-align: center;
}
.etq{
padding-left : 5px;
font-family: Tahoma;
color: #000;
font-size: 12px;
text-align: left;
width: 120px;
display: inline-block;
}
.chp {text-align: left ;}
.bouton {float: right ; background:red;}
.tbl { border: 1px solid #0000FF;width:280px;}
</style>
</head>
<body>
<form name="gie" id="gie" action="" method="post">
<table class="tbl">
<tbody>
<tr>
<td class="titre">Lister les intervenants</td>
</tr>
<tr>
<td><div id="l1">
<span class="etq">Lister les intervenants</span>
<select id="sel1" name="sel1">
<option selected="selected">Selectionner</option>
<option value="1">Par Ecole</option>
<option value="2">Par Discipline</option>
<option value="3">Par Localisation</option>
<option value="4">Par Circonscription</option>
</select>
</div>
<div id="l2" style="display:none;">
<span class="etq">Trié par</span>
<select id="sel2" name="sel2">
<option selected="selected" value="nomint">Nom</option>
<option value="numagr">Numéro agr.</option>
</select>
</div>
<div id="l3" style="display:none;">
<span class="etq">Sigle</span>
<select id="sel3" name="sel3">
<option selected="selected" value="EMC">EMC</option>
<option value="EPC">EPC</option>
<option value="ECU">ECU</option>
</select>
</div>
<div id="l4" style="display:none;">
<span class="etq">Ecole</span>
<select id="sel4" name="sel4">
<option> </option>
</select>
</div>
<div id="ok" style="display:none;">
<span class="etq"> </span>
<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" />
</div></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript"><!--
var liste=new Array (
new Array ( "Ecole1","Ecole2","Ecole3","Ecole4" ) ,
new Array ( "théâtre","informatique","langue vivante" ) ,
new Array ( "ville1","ville2","ville3" ),
new Array ( "zone1","zone2","zone3" )
);
var s1=document.getElementById("sel1");
var s4=document.getElementById("sel4");
var l2=document.getElementById("l2");
var l3=document.getElementById("l3");
var l4=document.getElementById("l4");
var ok=document.getElementById("ok");
s1.onchange=function()
{
if (s1.options[s1.selectedIndex].text === "Selectionner")
{
l2.style.display = "none";
l3.style.display = "none";
l4.style.display = "none";
ok.style.display = "none";
}
else
{
s4.length=0;
s4.length=liste[s1.selectedIndex-1].length;
s4.options[0].text="Indifferent";
for ( var n=1; n <= liste[s1.selectedIndex-1].length); n++ )
{
s4.options[n].text=liste[s1.selectedIndex-1][n-1];
}
l2.style.display = "inline";
l3.style.display = "inline";
l4.style.display = "inline";
ok.style.display = "inline";
}
}
-->
</script>
</body>
</html>
|
|
| [ Posté par #:-{)% ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 08-12-2009 à 15:31 | 2548 messages ]
ta 1° version fonctionnait bien en rajoutant le () à afficherAutres ==> afficherAutres();
c'est pas s4.lenght qui est undefined, mais s4.options[n], car tu n'as que la 1° option (c-à-d l'options[0]) les 1 à 4 n'existent pas encore
pour les avoir tous, il faut recréer le select, comme ce que tu as dans ta 1° version (case "liste_4" : ), avec des createElement et des appendChild
mais pourquoi, vouloir remettre les résultats de tes 'select' dans 1 'select', tu pourrais les mettre simplement dans 1 div ou dans 1 textarea (resultat += element_selected)
[Message édité par #:-{)% le 08-12-2009 à 15:34]
________________
Oubli du BBcode, rééditer!
barbe-sauvage ex Mozopiens devenu renard de feu... et un peu konq sur les bords
Les OG et les DR, je M pas :/
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
