Example 1: creating a hierarchical select

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.

 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; }
   }

 );

This field gets the option you've selected.

Example 2: creating a hierarchical select with a default value

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.

 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"
   }

 );

This field gets the option you've selected.