CFM Dynamic Select

CFM Best Practices

How to create a dynamic select drop down box that populates another select box


Date : 2006-03-20
Many times I have been asked how to create a dynamic select box situation where the first selection will change the options for the second select box.

The concept behind this process has been a little hard for some to grasp. I think the main reason is that this is really a javascript solution and most people are used to creating HTML with their CFM.

In this simple example we will be creating the javascript to run a multiple dynamic select box with our CFM code. The concept behind this could be applied to any programming language and I really should post this as a solution in each language but first things first.

You should notice that we first query the database for the data to be used in the first select box (the Cities). Then we create a loop and build a query to gather the Schools from each city into it's own query. Lastly we build the javascript to set these values for each of the dynamically named queries.

Using AJAX to do this would probably be recommended for production but there are some interesting concepts used in this code that once you understand will give you more power in your CFM code.



Here's the code:
Code:
<html>
<head>
<title>Best Coding Practices CFM Dynamic Select</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<cfquery name="City" Datasource="#DSN#">
  Select *
  From tblCity
</cfquery>
<cfloop index="x" From = "1" to = "#City.recordcount#">
  <cfquery name="School#city.id[x]#" datasource="#DSN#">
    Select *
    From tblSchool
    Where CityKey = #City.ID[x]#
  </cfquery>
</cfloop>
<script language="JavaScript">
<!--
function updatesel(form)
{
  form.Two.length = 1;
  form.Two.selectedIndex = 0;
  choice = form.One.options[form.One.selectedIndex].value;
  <cfloop index="count" from="1" to="#city.recordcount#">
  <cfoutput>
    if (choice == "#city.ID[count]#")
    {
      <cfloop index="x" From="1" to="#Evaluate('School#city.ID[count]#.recordcount')#">
        (form.Two.length)++;
        form.Two.options[form.Two.length - 1].text  = "#Evaluate('School#city.ID[count]#.school[x]')#";
        form.Two.options[form.Two.length - 1].value = "#Evaluate('School#city.ID[count]#.ID[x]')#";
      </cfloop>
    }
  </cfoutput>
  </cfloop>
}
//-->
</script>
<body>
  <form method="post" action="action.cfm" name="multiple_select">
    <label for="City">City:</label>
  <select name="One" onChange="updatesel(this.form)">
    <option value="%">All</option>
    <cfoutput query="City">
      <option value="#Id#">#City</option>
    </cfoutput> 
  </select>
    <label for="School">School:</label>
  <select name="Two">
    <option value="">[Select City First]</option>
  </select>
  </form>
</body>
</html>


This code assumes a database with 2 tables one for cities and the other for schools at those cities. It could be anything but you get the idea. If you have any questions on this code please post them in the forum where we can discuss them in the proper format. Just sending hate mail to me will not solve anything.

Comments :

No comments yet
  • Search For Articles