Gestion de listes liées

Version imprimable

Bonjour à tous,

voila un code pour gérer des listes liées et il ne manque que quelques corrections pour qu'il fonctionne.

le code a pour but de remplir une liste s4 selon un choix éffectué dans une liste s1 et faire afficher les listes s2, s3, s4 et le bouton d'envoi de formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>

07/12/2009, 16h12
sebhm
Bonjour,

javascript ne crée pas les variables automatiquement selon les ID qu'il y a dans le code HTML.
Il faut donc ajouter les déclarations suivantes :
Code:

1 2 3 4 var l2=document.getElementById("l2"); var l3=document.getElementById("l3"); var l4=document.getElementById("l4"); var ok=document.getElementById("ok");
et j'ajoute :
Pourquoi le tableau tbl ???
07/12/2009, 18h36
apt

Bonsoir sebhm,

Oui effectivement je me suis rendu compte qu'il falait définir le reste des variables utilisées dans le code javascript.

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 :

Code:

s4.length=liste[s1.selectedIndex-1].length;

pourtant elle est 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.
07/12/2009, 20h35
sebhm

chez moi, ca a l'air bien ...

repost tout ton code, et dis nous quel comportement tu as exactement

le revoila après quelques correction de frappe :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>&nbsp;</option>
            </select>
          </div>
          <div id="ok" style="display:none;">
			<span class="etq">&nbsp;</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>

08/12/2009, 09h05
sebhm

Citation:

et dis nous quel comportement tu as exactement

....

Code:

for ( var n=1; n <= liste[s1.selectedIndex-1].length); n++ )

un soucis de parenthese là

utilise Firebug ou meme la console d'erreur dans Firefox qui te disent tous les 2 qu'il y a un probleme sur la ligne ci-dessus des l'ouverture de ta page

ensuite, tu as modifié notamment le compteur n, qui est désormais initialisé à 1 au lieu de 0. Du coup, tu fais '<=' au lieu de '<' et du fais 'liste[s1.selectedIndex-1][n-1]' au lieu de 'liste[s1.selectedIndex-1][n]'.
Toute cette modif ne sert pas à grand chose à part t'embeter, et il faut alors également modifier

Code:

s4.options[n].text

en

Code:

s4.options[n-1].text