Zach’s ugly mug (his face) Zach Leatherman

Conservative Design Example: Hierarchical Options

March 23, 2007

Welcome, one and all, to the second installment of actual code examples for the Conservative Design series. The decision was made (by me) to rename the component in question from the original Hierarchical Select to Hierarchical Options, due to the fact that the hierarchy can consist of any multiple option component, and is not limited to just a select. And to this face, this particular component was documented in the original post entitled Conservative Design: Hierarchical Select Boxes.

Hierarchical Options
Click the image above to go to the example.

Notes on the example: The Tree structure is as follows:

  • Primary
    • Secondary
      • Tertiary
        • Quaternary
          • Quinary
      • 2nd Tertiary (is a static element that doesn’t hide)

So without further adieu or out of place french, what do we have? 3 out of 4 requirements and 1 of 2 luxury items.

  • Handles any number of select elements in a linear or tree (luxury item) like structure.
  • Child select elements are optional based on parent selection. Can hide entire div element or display a message stating no options are available.
  • Compliant with the Reset button.
  • Right now only loads from standard HTML markup (not yet from JavaScript or JSON or an XMLHTTPRequest)
  • Only supports Select elements for now, in the future should be abstracted to support Checkbox Lists or any multiple option component.

Outstanding Bugs:

  • Opera button doesn’t reset properly with Reset Button
  • Clicking off of the default and then back onto the default has the original selections downstream (but doesn’t propagate more than one level)

< Newer
Logical XOR in JavaScript
Older >
Conservative Design Example: Multiple Option List

Zach Leatherman IndieWeb Avatar for a builder for the web at IndieWeb Avatar for 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 »

Shamelessly plug your related post

These are webmentions via the IndieWeb and

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)