Dependent Drop-down Example

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 'display_value', 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.

Another insight into this example is seeing how nodes are set as member variables on 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.


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

Guitar Brands:

Guitar Models: