In Search of Dynamic Dependent Lists
by Megan Garrison
For a while now, I've been looking for a certain code sample: dynamic dependent
lists that pull from database tables and work in BOTH IE AND NETSCAPE 4X. I
combed the net far and wide, trying each custom tag and piece of JavaScript I
uncovered, but none seemed to meet my need for both cross-browser compatibility
and ease of use. After a while I stopped looking. Then I read Mike Corbridge's
Multiple dynamic drop-down selection boxes example here at
http://tutorial11.easycfm.com/
"hmmm" I thought. Mike's original script allows
for just two categories, but with a little noodling and a tip from fellow
easyCFM forum member, Irvin, Voila! the example below. So far it works on CF4.5
and CF5 with IE 5 and NS 4.6 My test data was Countries and States/Provinces
with just 2 countries (United States & Canada) and their respective
States/Provinces, as well as using 4 categories of animal species and breeds
within those species. I'm not sure how practical this would be for a BIG set of
categories and list items. After working out the dependent list code example
shown below, I thought I would try my hand at creating a custom tag (my first)
in order to reuse the code as easily as possible. You can check out the results
by clicking here.
The next step in this evolution might be a tutorial implementing WDDX (any
takers?).
meanwhile:
========================================================
2 tables
tblCountries with country_id and country fields
tblLocations with location_id, state, country_id fields
code:
========================================================
<cfquery name="getLocal"
datasource="locate">
SELECT l.location_id, l.state, c.country, c.country_id
FROM tblLocations l
INNER JOIN tblCountries c ON l.country_id = c.country_id
ORDER BY country desc, state
</cfquery>
<html>
<head>
<title>Dynamic JS Dropdowns</title>
<cfset idx = -1>
<cfset mycase = 0>
<!---
The JavaScript is adapted from Mike
Corbridge's Multiple dynamic drop-down selection boxes example
http://tutorial11.easycfm.com/
--->
<script language="JavaScript1.2">
function whichLocal(obj){
switch (obj.selectBorder.selectedIndex){
<!--- use the group attribute to group output by
category --->
<cfoutput query="getLocal"
group="country">
<cfset mycase = mycase + 1>case #mycase#:
<cfset myList = ValueList(getLocal.country_id)>
<cfset numberInCountry = ListValueCount(myList, country_id)>
obj.selectLocal.length=#numberInCountry#<cfoutput><cfset idx = idx + 1>
obj.selectLocal.options[#idx#].value="#getLocal.location_id#"
obj.selectLocal.options[#idx#].text="#getLocal.State#"</cfoutput>
break;
<cfset idx = -1>
</cfoutput>
}
}
</script>
</head>
<body>
<form name="myform"
action="myactionpage.cfm"
method="post">
<table>
<tr>
<td>OPTIONS<br>
<select name="selectBorder"
onchange="whichLocal(this.form)">
<option>-
Select Country-</option>
<!---
again, use the group attribute to group output by category --->
<cfoutput
query="getLocal"
group="country">
<option
value="#Country_id#">#Country#</option>
</cfoutput>
</select>
<select name="selectLocal"
onchange="whichLocal(this.form)">
<option> </option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option>
--------------------------------- </option>
</select>
<input type="submit"
name="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
-
ColdFusion on a Stick
How to Create a Portable "Plug n Play" CF Application
Author: Megan Garrison
Views: 13,047
Posted Date: Friday, March 31, 2006 -
In Search of Dynamic Dependent Lists
Example of how to dynamically populate a drop-down list from database tables based on a selection in another drop-down list.
Author: Megan Garrison
Views: 26,047
Posted Date: Monday, February 24, 2003 -
Integrating & Customizing Google Maps Using the Google Maps API
Rather long introduction to using the Google Maps API to incorporate Google Maps into your applications
Author: Megan Garrison
Views: 20,653
Posted Date: Tuesday, September 6, 2005 -
Simple "Call Me Back!" SMS Alert
Send a Text-Message to Cell Phone or Pager from Your Website
Author: Megan Garrison
Views: 4,430
Posted Date: Thursday, November 15, 2007 -
Simple Web Page Translation Widget
Make a Simple Web Page Translation Widget Using Google Translate
Author: Megan Garrison
Views: 3,981
Posted Date: Saturday, November 3, 2007