Dynamically Linked Drop-Down Boxes - Javascript

Source Code Back to Tutorials

A very common question I see is how to link two dynamic drop-down boxes designed so that when you choose an option in the first drop-down box, the options in the second drop-down box are updated.

In this example the City drop-down will be updated when you select the State.

This is the Javascript way of doing this.  The Javascript method works by loading all possible data into arrays and pulling that data as required. This means that all possible values need to be in memory. This is not recommended for large data sets.

The data for this example is coming from our Address Book example.

No Addresses Found