Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

153 lines (115 sloc) 4.595 kB
<!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": "&lt;Example Hierarchical Select&gt;",
"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": "&lt;Example Hierarchical Select&gt;",
"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>
Jump to Line
Something went wrong with that request. Please try again.