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
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit.form.Select test</title>
<style>
@import url(../../themes/claro/document.css);
@import url(../../themes/claro/claro.css);
@import url(../css/dijitTests.css);
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Select");
var data2 = [
{value: "94510", label: "La Queue en Brie"},
{value: "73300", label: "Chambery"},
{value: "94000", label: "Créteil"},
{value: "94200", label: "Nogent"},
{value: "73100", label: "Saint-Martin"},
{value: "73200", label: "Albertville"},
{value: "73400", label: "Bourg Saint-Maurice"}
]
;
dojo.ready(function(){
dojo.connect(s1, "onChange", function(val){
//On récupère nos données qu'on veut afficher dans la seconde combo
var deps = dojo.filter(data2, function(item) {
//on prend les données qui commencent par le numéro du département (très très basique ;) )
return item.value.indexOf(val)==0;
});
console.log(deps);
//on supprime tout
s2.removeOption(s2.options);
//on met les nouvelles données ( sous la forme d'un tableau pour être plus performant)
s2.addOption(deps);
});
s1.set("value",73);
});
</script>
</head>
<body class="claro">
<label for="s1">Départements: </label>
<select id="s1" data-dojo-id="s1" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s1" ' style="width:150px">
<option value="94">Val de Marne</option>
<option value="73" >Savoie</option>
</select>
<label for="s2">Villes </label>
<select id="s2" data-dojo-id="s2" data-dojo-type="dijit.form.Select" data-dojo-props='name:"s2", value:"CA"' style="width:150px">
</select>
</body>
</html> |
