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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comment lier des listes déroulantes entre elles</title>
<style>
body{
margin:2em;
font-family:Verdana;
font-size:100%
}
label{
display:inline-block;
width:10em;
}
select{
width:15em;
font-family: Verdana;
}
</style>
<script>
/**
* déclaration des données pour les SELECT
**/
var pays = [
{'valeur': 'p0', 'texte': 'pays 0'},
{'valeur': 'p1', 'texte': 'pays 1'},
{'valeur': 'p2', 'texte': 'pays 2'}
];
var ville = {
'p0' : // clé sur data pays
[
{ 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
{ 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
{ 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
],
'p1' :
[
{ 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
{ 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
{ 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
],
'p2' :
[
{ 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
{ 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
{ 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
]
};
var rue = {
'p0v0' : // clé sur data ville
[
{ 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
{ 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
{ 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
],
'p0v1' :
[
{ 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
{ 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
{ 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
],
'p0v2' :
[
{ 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
{ 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
{ 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
],
'p1v0' :
[
{ 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
{ 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
{ 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
],
'p1v1' :
[
{ 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
{ 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
{ 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
],
'p1v2' :
[
{ 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
{ 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
{ 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
],
'p2v0' :
[
{ 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
{ 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
{ 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
],
'p2v1' :
[
{ 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
{ 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
{ 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
],
'p2v2' :
[
{ 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
{ 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
{ 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
]
};
/**
* fonction d'ajout des options
**/
function updateSelect( id_select, liste){
var oOption,
oSelect = document.getElementById( id_select),
i, nb = liste.length;
// vide le SELECT
oSelect.options.length = 0;
// création des options d'après la liste
for (i = 0; i < nb; i++) {
// création option
oOption = new Option( liste[i].texte, liste[i].valeur);
// ajout de l'option en fin
oSelect.add( oOption);
}
// on retourne la valeur pour le SELECT suivant
return oSelect.value;
}
/**
* fonction de remplissage des SELECT
**/
function fillSelect( id_select, valeur) {
switch (id_select) {
case 'init':
// mise à jour SELECT
valeur = updateSelect( 'listepays', pays);
// appel sur SELECT lié
fillSelect( 'listepays', valeur);
break;
case 'listepays':
// mise à jour SELECT
valeur = updateSelect( 'listeville', ville[valeur]);
// appel sur SELECT lié
fillSelect( 'listeville', valeur);
break;
case 'listeville':
// mise à jour SELECT
updateSelect( 'listerue', rue[valeur]);
break;
}
}
</script>
</head>
<body>
<form name="a_fond_la_forme">
<p>
<label for="listepays">Choisir un pays</label>
<select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
</p>
<p>
<label for="listeville">Choisir une ville</label>
<select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
</p>
<p>
<label for="listerue">Choisir une rue</label>
<select id="listerue" name="listerue"></select>
</p>
</form>
<script>
// remplissage des SELECT lorsque le DOM est constitué
fillSelect('init');
</script>
</body>
</html> |
