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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>