Conservative Design: Hierarchical Select
This is a post in a series entitled Conservative Design Patterns for Form Elements.
Hierarchical Select Boxes (sometimes called Dynamic Select Boxes if you’re doing a web search)
Behavior: 2 or more select boxes working in parallel, where selection of an option in a parent dynamically adjusts the options of the child.
Screenshot (Prior to any selection):
Screenshot (After an option is chosen in the first select box):
Minimum Requirements for Acceptable Feature Set:
- Must be able to handle any (reasonable) number of select boxes in a linear structure: parent elements only have one child.
- Child select elements can be optional depending on parent selection. Maybe a continent doesn’t have any countries, so don’t display a child select element. It would be nice to have a visual indicator showing whether or not a parent option had children (triangle, folder(?), arrow or other customizable icon).
- Must have functionality that allows it to be reset with the form reset button, as Matt Kruse has done (Example 3).
- Load options in child select’s dynamically from multiple data sources (describe in raw HTML code, local JS file, remote JSON object or XML file using an XMLHTTPRequest)
Luxury Feature Set:
- Must be able to nest select elements in a tree structure: selecting an option in a parent element could modify 2 child select elements.
- Could be able to modify the options for any element that displays options (Select1 or Select as described in the Conservative Design Post: Checkbox Group, Radio Group, Select Single or Multiple)