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 code
Add the following JavaScript function inside the
<head> portion of the document:
<script>
function searchCountries(continent){
if(continent.value!=""){
document.search_countries_form.lookup_continent.value=continent.value;
document.search_countries_form.submit();
}
}
</script>
After that using Code View or Behaviors panel assign the function
call to the "onChange" event of the "continents" menu:
<select id="continents" name="continents" onChange="searchCountries(this)">
This will set the value of our hidden "lookup_continent" field inside the "search_countries_form"
to the value picked in the "continents" dropdown and submit the form.
Create a Recordset "GetCountries_rs" to
select the countries based on the value of the "lookup_continent" field:
Add Recordset to XML Server Behavior.
Make sure your "GetCountries_rs" recordset is selected from the Recordset
dropdown and set "First check if variable is set" to Form Variable "lookup_continent".
Open the page in the browser and pick a value
from the "continents" dropdown. This will submit the form and generate an XML
file.
Save geneated XML page as "countries.xml" - we will used it as the Design
time feed for our Spry Data Set.
Create a Spry XML Data Set "countries_ds":
Make sure the Data Type is set to XML (Dreamweaver CS4 only). Specify
the current page as the XML Source or (Data File in Dreamweaver
CS4). Browse for the saved continents.xml to specify it as the Design time
feed.
Select <record> node as the row element and don't forget to disable Data
caching.
Replace "countries" menu with the Spry Repeat
list:
Select the list element in the Design View and click Spry Repeat list button on the Spry tab of the Insert toolbar.
In the popup dialog select "SELECT (Drop-down List) " option for the Container
tag, "countries_ds" for the Spry Data Set, "Country_Name" for the Display
Column and "COUNTRY_ID" for the Value Column:
Click "OK" when prompted to add Spry Region.
Make sure the newly added element name is set to "countries".
To add a blank option to a the menu populated by a Spry Data Set add the
following tag right between the opening <select> tag and the first
<option> tag:
<option value="" spry:if="'{ds_RowID}'=='0'"></option>
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.