Skip to main content
Participating Frequently
June 19, 2006
Answered

Dynamically Updating Dropdown boxes

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.
    This topic is closed to new replies. Start a new post to keep the conversation going.
    Inspiring
    June 19, 2006
    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.

    2 replies

    BlazeixAuthor
    Participating Frequently
    June 19, 2006
    Thank you for your help! I will probably use the javascript way, since the flash form seems to be a little slow on my computer. Thanks!
    Translate
    Inspiring
    June 19, 2006
    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.
    Translate