-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (115 loc) · 4.49 KB
/
index.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Javascript Universal Hierarchical Select Examples</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
<script src="hierarchical_select.js" type="text/javascript"></script>
</head>
<body>
<h1>Javascript Universal Hierarchical Select Examples</h1>
<p>
Hierarchical select refers to situations where the select options represent a hierarchical structure of objects. In such cases, we assume that the option list of each select element contains a certain level in the object hierarchy. When an option is chosen, a new select element will appear next to the current one, containing options of children of the selected item, unless it reaches a leaf. We represent such a kind of select as a class, which can be instantiated where a hierarchical select is needed.
</p>
<h2>Example 1: creating a hierarchical select</h2>
<p>
When creating an object of hierarchical select, the first argument specifies the element in a page that contains the intending select elements, i.e. the location to place the hierarchical select. The hierarchical objects for options in the select elements should be provided as the second argument, in the format as shown in the following example. The third argument includes other necessary parameters: "header" is used to give a indicative header to the upper select element, and "afterSelect" specifies the behavior that responses to the select action.
</p>
<div style="border:solid; background-color:LightGrey">
<pre>
new HierarchicalSelect(
$("hierarchical_select_container_1"),
{
"example option A": {
"A-1": {"A-1-1": {}, "A-1-2": {}},
"A-2": {},
"A-3": {}
},
"example option B": {
"B-1": {"B-1-1": {"B-1-1-1":{}}}
}
},
{
"header": "<Example Hierarchical Select>",
"afterSelect": function(sel) { $('show_1').value = sel.value; }
}
);</pre>
</div>
<br/>
<b>The output looks like: <a id="hierarchical_select_container_1"></a></b>
<p>This field gets the option you've selected. <input type="text" id="show_1" size="27"></input></p>
<script type="text/javascript">
new HierarchicalSelect(
$("hierarchical_select_container_1"),
{
"example option A": {
"A-1": {"A-1-1": {}, "A-1-2": {}},
"A-2": {},
"A-3": {}
},
"example option B": {
"B-1": {"B-1-1": {"B-1-1-1":{}}}
}
},
{
"header": "<Example Hierarchical Select>",
"afterSelect": function(sel) { $('show_1').value = sel.value; }
}
);
</script>
<h2>Example 2: creating a hierarchical select with a default value</h2>
<p>
If there is a default value, i.e. you want to create your hierarchical select with something being selected, you can simply specify the default value within the third argument, all select elements needed will then be generated with corresponding options being selected.
</p>
<div style="border:solid; background-color:LightGrey">
<pre>
new HierarchicalSelect(
$("hierarchical_select_container_2"),
{
"example option A": {
"A-1": {"A-1-1": {}, "A-1-2": {}},
"A-2": {},
"A-3": {}
},
"example option B": {
"B-1": {"B-1-1": {"B-1-1-1":{}}}
}
},
{
"header": "<Example Hierarchical Select>",
"afterSelect": function(sel) { $('show_2').value = sel.value; },
<b>"defaultOption": "A-1-1"</b>
}
);</pre>
</div>
<br/>
<b>The output looks like: <a id="hierarchical_select_container_2"></a></b>
<p>This field gets the option you've selected. <input type="text" id="show_2" size="27"></input></p>
<script type="text/javascript">
new HierarchicalSelect(
$("hierarchical_select_container_2"),
{
"example option A": {
"A-1": {"A-1-1": {}, "A-1-2": {}},
"A-2": {},
"A-3": {}
},
"example option B": {
"B-1": {"B-1-1": {"B-1-1-1":{}}}
}
},
{
"header": "<Example Hierarchical Select>",
"afterSelect": function(sel) { $('show_2').value = sel.value; },
"defaultOption": "A-1-1"
}
);
Event.observe($('show_2'), 'load', $('show_2').value = $('hierarchical_select_container_2').lastChild.value);
</script>
</body>
</html>