EasyCFM.COM ColdFusion Tutorial: In Search of Dynamic Dependent Lists

Server Time:
Sunday May 11 2008 08:16 PM

Your Time:

HostMySite.Com is sponsoring this tutorial, please visit their site today!

This tutorial is sponsored by HostMySite.Com - ColdFusion Hosting

In Search of Dynamic Dependent Lists
by: Megan Garrison

[Download in PDF Format] [Download in FlashPaper Format]

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>
    
    <script language="JavaScript1.2">
        function whichLocal(obj){
                    switch (obj.selectBorder.selectedIndex){
                    
                    <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>
         
         <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>

Date added: Mon. February 24, 2003
Posted by: Megan Garrison | Views: 23666 | Tested Platforms: CF5 | Difficulty: Intermediate
Categories Listed: Forms Other

HostMySite.Com is sponsoring this tutorial, please visit their site today!

This author's other tutorials:

Simple "Call Me Back!" SMS Alert
Send a Text-Message to Cell Phone or Pager from Your Website - Date added: Thu. November 15, 2007
Simple Web Page Translation Widget
Make a Simple Web Page Translation Widget Using Google Translate - Date added: Sat. November 3, 2007
ColdFusion on a Stick
How to Create a Portable "Plug n Play" CF Application - Date added: Fri. March 31, 2006
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 - Date added: Tue. September 6, 2005

Comments on this tutorial
Read previous comments on this particular tutorial
Dynamic Form hi there, this tutorial is great! i was just wondering if anyone has implemented this tag using dynamic forms eg. a record is to be edited so the options need to be already populated? Posted by: Mike Posted on: 10/27/2004 05:33 PM
upload selections to database After making selections on http://www.childcareseekers.com/tag/myactionpage.cfm, upon submit how would you get these selections into a new row in a Access Database table, with http://www.childcareseekers.com/tag/myactionpage.cfm then presenting an acknowledgement such as "Thank you for your input" I have obtained a similar dependent drop down list script from this site, and I want the selections to upload into a new row in my database table... problem - it only inserts a row, a blank row with no data. Hoping to figure out a solution. Posted by: new visitor Posted on: 12/07/2004 08:31 AM
same table query How would this be done with just one table instead of two? For example, for the first listbox: SELECT DISTINCT CountryName FROM tblCountry ORDER BY CoundtryName ASC then, for the second listbox: SELECT State FROM tblCountry WHERE CountryName = [result form first query] ORDER BY State ASC Posted by: john Posted on: 02/08/2006 06:04 PM
Third dropdown. Here is what i need; I have a page where user will select a Category which is the main select list and there are 2 different tables, one having Types according to the Category_ID and the other table having Frequency according to the Category_ID. So user will just select the Category and then the Types and Frequency dropdown will be filled up according to the selected category. I did try with your code it works fine to populate one related dropdown, but now i am stuck how 2 dropdowns will be populated. Posted by: Zahid Posted on: 02/09/2006 02:52 PM
Thanks a lot you helped me immensely Just wanted to say thank you for taking the time to post an excellent tutorial. I am glad to took the other static tutorial and made it dynamic. This is perfect for a business directory that I have been burdened to develop for my work. I look forward to trying it out. Posted by: Drew Posted on: 02/14/2006 10:35 AM
How about in ColdFusion 4.0. Hi, That works great but my friend having 4.0 version which seems to be very old and I couldn't help him. Can anyone help me how this code will work on his 4.0 version because there isn't any ListValueCount() function, and he is getting error at that line? Please. Posted by: Zahid Posted on: 02/20/2006 10:07 PM
How about updating select checkboxes based on list item selected? This is great code! Could I adapt this technique to allow me to populate a list with users and then have a number of checkboxes that would check or uncheck based on which user I selected in the list? Posted by: Steve Evans Posted on: 07/26/2006 06:38 PM
Works in IE, but not in Firefox or Safari Has anyone else had this code for dynamic multiple selects work only in IE? Works like a charm in IE but in other browsers, the second select just sits there blank .. any suggestions would be most helpful. Posted by: Suzanne Posted on: 10/03/2006 04:52 PM
not display if push back or forward hai.. if i push button back at navigator second state not display.. how i want to display data if i want to back or forward i hope someone can give a solution.. thank Posted by: iris Posted on: 11/11/2006 01:38 PM
add a static entry Im trying to append a static selection at the beginning of this line... obj.selectLocal.options[#idx#].value="#getLocal.location_id#" obj.selectLocal.options[#idx#].text="#getLocal.State#"</cfoutput> ...any suggestions ? Posted by: matt Posted on: 11/27/2006 07:53 PM

You are 1 of 761 active sessions! | Privacy | Company
Copyright © 2002 EasyCFM.Com, LLC. (Easy ColdFusion Tutorials) All Rights Reserved
All other trademarks and copyrights are the property of their respective holders.

ColdFusion Hosting

ADD TO:

Blink

Del.icio.us

Digg

Furl

Google

Simpy

Spurl

Y! MyWeb