Zach’s ugly mug (his face) Zach Leatherman

Conservative Design: Hierarchical Select

February 22, 2007

This is a post in a series entitled Conservative Design Patterns for Form Elements.

For now, I’ll start off with an easy web component that a lot of you have probably already had some experience with. But, strangely enough, it is not included in any of the JavaScript libraries that are out there, that I’ve seen. If you know of one, go ahead and post it in the comments.

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):
Prior to any selection

Screenshot (After an option is chosen in the first select box):
After a selection is made

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)

< Newer
Conservative Design Patterns for Form Elements
Older >
Screen Printing, Fake Interfaces Part 1

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Comment
  1. ahmad balavipour Disqus

    16 Jul 2011
    Thanks alot, very good tutorial
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)