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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Listes déroulantes dynamiques</title>
<link rel="stylesheet" type="text/css" href="JS-DynamicSelect.css">
<script language="javascript" src="JS-DynamicSelect.js"></script>
<script language="javascript">
function setRegion(oSelect) {
// Par défaut, la valeur de retour de l'event est mis à false.
event.returnValue = false;
// L'objectif est de charger la liste déroulante slRegion en
// fonction de la valeur sélectionnée dans la liste déroulante
// courante (identifiée par le paramètre oSelect). La liste
// slRegion va être construite dynamiquement en utilisant le
// tableau tCountyLink.
if (oSelect != null) {
// On vérifie que l'entrée dans tRegionLink existe pour la
// valeur de oSelect.
if (tRegionLink[oSelect.value] != undefined) {
// L'entrée existe, on peut donc récupérer la chaine des
// régions et la convertir en tableau.
var tRegions = new Array;
tRegions = tRegionLink[oSelect.value].split(";");
// Nous pouvons mettre à jour le titre pour les régions.
var oLabel = document.all.lbRegion;
if (oLabel != null) oLabel.innerText = tRegions[0] + ":";
// On trie le tableau des régions, juste pour la frime,
// après avoir supprimé la première entrée. L'idéal étant
// d'avoir les éléments déjà trier dans la string :)
tRegions.shift(); tRegions.sort();
// Puis, construisons le contenu de la liste slRegion.
var oRegions = document.all.slRegion;
if (oRegions != null) {
// D'abord, nous devons nettoyer la contenu actuel de
// la liste slRegion.
oRegions.innerHTML = "";
// Ensuite, nous pouvons générer le nouveau contenu.
for (cnt=0; cnt<tRegions.length; cnt++) {
var oOption = document.createElement("OPTION");
oRegions.options.add(oOption);
oOption.innerText = tRegions[cnt];
oOption.value = cnt;
}
// En théorie, tout s'est bien passé, donc fixons la
// valeur de retour de l'event à true.
event.returnValue = true;
}
}
}
// On désactive l'héritage de l'event.
event.cancelBubble = true;
}
</script>
</head>
<body onload="setRegion(document.all.slCountry);">
<div class="box">
<div class="dvLabel" id="lbCountry">Pays:</div>
<div class="dvSelec" id="dvCountry">
<select id="slCountry" onchange="setRegion(this);" class="inSelect">
<option value="BE">Belgique</option>
<option value="FR">France</option>
</select>
</div>
</div>
<div class="boxRight">
<div class="dvLabel" id="lbRegion"></div>
<div class="dvSelec" id="dvRegion">
<select id="slRegion" class="inSelect"></select>
</div>
</div>
</body>
</html> |
