你只需要创建HierarchicalSelect类的一个对象，并给出相应的参数，便可在页面需要的位置上得到一个层次式下拉列表框。下面给出具体的例子。其中，第一个参数用于指定放置目标元素的位置。例如，你可以创建一个空的div用作放置层次式下拉列表框的容器。第二个参数接收用作选项的具有层次结构的数据集，其形式为JSON类型的嵌套键值对，有些语言也把这种数据结构称为字典或hash。第三个参数包含另外一些必要的信息，其中“header”用于提供顶层下拉列表框的标题选项，“afterSelect”则可用以指定当有选项被选中时需要作出的响应。
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; }
}
);
这个文本框可获取你选中的选项值：
如果你想你的层次式下拉列表框被创建时有默认选项被选中，你只需要在创建HierarchicalSelect对象的第三个参数中，加入"defaultOption"这一项，指定哪个是默认选项即可。从顶层到默认选项之间所涉及的下拉列表框都会被创建并选中相应的选项。
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"
}
);
这个文本框可获取你选中的选项值：