Chained Dropdowns with Spry Search

In this brief tutorial you will learn how to build "chained dropdowns" functionality using one of the tools from the Spry Data Utilities Toolkit - Spry Search Object.

"Chained dropdowns" is one of the terms that can be used to describe a hierarchy of two or more dropdown menus where making a selection from an upper level menu results in the change of options in the menus on the lower levels (causes a "chain reaction").

Getting started

A classic example for chained dropdowns would be loading the list of either states or provinces in a "State/Province " dropdown when "USA" or "Canada" is being picked from the "Country" dropdown.

For the purpose of this tutorial let us consider the following example:

We have an HTML form "main_form" with three dropdown menus (<select> tags): "continents", "countries" and "cities". Selecting an item from the "continents" dropdown should load a list of countries for that continent, while making the selection in the "countries" dropdown should populate the "cities" menu with the list of cities for that country.

The database

The database contains three corresponding tables:


Since the list of the continents needs to loads only once we will populate it from a regular Recordset. The Recordset simply selects all the continents from the "continents" table sorted alphabetically by the Continent_Name.




The labels for the dropdown options are populated from the Continent_Name field, while the values from the CONTINENT_ID. Because CONTINENT_ID is a foreign key in the "countries" table we can look up this table based on the value selected in the "continents" dropdown.

To lookup the countries for the selected continent we will create a form (outside the current form!!!) somewhere at the bottom of the screen. Set the name attribute of the form to "search_countries_form" and the "method" attribute to "post".
Add a hidden field "lookup_continent" inside that form. When the page renders in the browser "search_countries_form" will not be visible (since it only contains one hidden field).