Creating a double drop-down

A 'double drop-down' is a pair of linked drop downs where the options in the second drop-down depend on the selection in the first drop-down.

As an example, this cookbook has a series of chapters, each of which contain several recipes. We might have a list of chapters in the first drop-down and then show the recipes from the selected chapter in the second drop-down.

For simplicity here we'll just use two chapters each with three recipes:

• Chapter 1: Recipe a, recipe b, and recipe c

• Chapter 2: Recipe x, recipe y, and recipe z

There are two fundamentally different ways of approaching this recipe. The first is to load all of the options into the Form HTML before the page is sent to the browser and to hide the unwanted options; the second is to load none of the options but to use an AJAX request to get the options we need when we need them.

Both approaches are useful in different situations. Where there are relatively few options, as there are with the book, the "load...