Be the first to write a review
Chained Dropdowns with Spry Search
Build "chained dropdowns" functionality.
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").
Last step
Finally if you wish to clear list of options in
the "cities" dropdown when the continent is changed add the following script
below the rest of JavaScript code in the <head> section of your page.
var loadCountriesObserver = new Object();
loadCountriesObserver.onDataChanged =
function(dataSet, data){
if(cities_ds.getRowCount()>0){
document.search_cities_form.lookup_country.value=-1;
document.search_cities_form.submit();
}
};
countries_ds.addObserver(loadCountriesObserver);
This will create an Observer object (loadCountriesObserver)
which will be triggered whenever new data is loaded into the countries_ds data set. The code will reset cities_ds data set by submitting search_cities_form form with the lookup_country field value set to "-1" (a value that doesn't
exist in the database).
Alex July
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.