Dynamically Updating Dropdown boxes

Question

Hi, I need to make a dropdown box whose options depend on a
previously selected dropdown box. For instance, if I have two
boxes, one labeled state and one labeled city, I want the city box
to only contain cities in the state that is specified in the state
box. Is there a way to do this in coldfusion? Thanks.

Answer 1

Yes, this can be done. I've done it a couple ways. If you use
Flash forms you can put it into ActionScript and not have to reload
the page.
See the example here:
https://secure.cbnw.org/secure/onlineRegistrations/tadmor06/preRegister.cfm
Choose Yes, No, and No then click continue. Choose a grade in
the drop-down, then go to the Camp Session page and look at the 2
drop-down. Try choosing a first option, then a second option
(you'll notice the second option doesn't allow a choice until you
choose the first option. Then try going back to the first option
and choosing the same choice you have in the second option. (Also,
if you go back and change the grade e.g. from grade school age to
high school age) you'll see the session choices change.
Another way to do it is with simple html forms and
javascript. Here's a page I'm currently using that on:
http://home.cbnw.org/coldFusion/cbnw/smartphone.cfm
Here's the parts of my code that pertain to the drop-downs:
<cfquery name="dataQuery" datasource="myDatasource">
SELECT city, state
FROM churches
ORDER BY city, state
</cfquery>
<!---Get all states--->
<cfquery name="stateQuery" dbtype="query">
SELECT state
FROM dataQuery
GROUP BY state
ORDER BY state
</cfquery>
<!---Get all cities for a particular state--->
<cfquery name="cityQuery" dbtype="query">
SELECT city, state
FROM dataQuery
WHERE state = '#URL.state#'
GROUP BY city, state
ORDER BY city, state
</cfquery>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_stateMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='smartphone.cfm?state="+selObj.options[selObj.selectedIndex].value+" '");
if (restore) selObj.selectedIndex=0;
function MM_cityMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='smartphone.cfm?state=<cfoutput>#URL.state#</cfoutput>&city="+selObj .options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
//-->
</script>
Down in the body of the page:
<cfselect
name="state"onChange="MM_stateMenu('parent',this,0)">
<option value="0" <cfif (isDefined("URL.state") AND 0
EQ URL.state)>selected</cfif>>Please
Choose a State:</option>
<cfoutput query="stateQuery">
<option value="#stateQuery.state#" <cfif
(isDefined("URL.state") AND stateQuery.state EQ
URL.state)>selected</cfif>>#stateQuery.state#</option>
</cfoutput> </cfselect>
</p>
<p> <cfselect name="city"
onChange="MM_cityMenu('parent',this,0)">
<option value="0" <cfif (isDefined("URL.city") AND 0
EQ URL.city)>selected</cfif>>Please
Choose a City:</option>
<cfoutput query="cityQuery">
<option value="#cityQuery.city#" <cfif
(isDefined("URL.locationCity") AND cityQuery.city EQ
URL.city)>selected</cfif>>#cityQuery.city#</option>
</cfoutput> </cfselect>
Hope that helps.