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").
The Spry search oject
Add Spry Search object:
Select "search_countries_form" as the Form with Search fields and select
"countries_ds" from the Data Set dropdown. Pick "countries" as the
element to display If Data Set is NOT empty.
Test your page in the browser - if you change the value in the "continents"
dropdown selection of the matching countries will load in the "countries"
dropdown. There is, however, one problem: it doesn't happen for the value
selected in the "continents" dropdown by default right after the page loads.
We have two options to deal with the issue:
Add a blank item to the "continents" menu.
or
Set the value of the "lookup_continent" to the
default value of the "continents" dropdown and submit the "search_countries_form"
as soon as the page loads.
For that to happen place the following script inside the <head> section
of your page:
<script>
function getDefaultCountries(){
document.search_countries_form.lookup_continent.value=document.getElementById("continents").value;
document.search_countries_form.submit();
}
</script>
Then using Code View or Behaviors panel add the function call to
the <body> onLoad event:
<body onload="getDefaultCountries()">
Now we will repeat the steps above for the
cities lookup, but change the names of the page elements, Recordset, Spry Data
Set, etc. accordingly:
The lookup form - "search_cities_form"
The hidden field - "lookup_country"
Recordset - "GetCities_rs"
Spry XML Data Set - "cities_ds":
onChange event handler for "countries" dropdown:
<select name="countries" id="countries" onChange="searchCities(this)"
spry:repeatchildren="countries_ds">
<script>
function searchCities(country){
if(country.value!=""){
document.search_countries_form.lookup_country.value=country.value;
document.search_countries_form.submit();
}
}
</script>
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.