In this example the "Guitar Brands" drop-down selector is considered the "parent" drop-down while the "Guitar Models" drop-down selector is considered the "child" or "dependent" drop-down.

A dependency exists between the two selectors because the "Guitar Brands" drop-down determines which guitar model options get loaded into the "Guitar Models" drop-down.

Implementing this is a little trickier than one would think. The underlying data structure for each option is a Node. Each node contains an 'id', a 'displayValue', and a 'children' array which points to more nodes. Understanding how the nodes are structured is key to understanding how this dependent drop-down example works. When the app first loads, a tree of nodes is assembled which backs both select drop-downs.

Another insight into this example is seeing how nodes are "injected" into the JavaScript Option objects. When I first saw this technique, I thought it was very "dirty", but it's something I've come to learn as being very JavaScript-like. That is, I believe, this is a good way to take advantage of JavaScript's flexibility. You could never do this in a language like Java, but in JavaScript, it's no big deal.

So, without further ado, here's the example. To see the sourcecode, right-click this page and select "View page source" from the browser's pop-up menu.

Guitar Brands:

Guitar Models: