Yet Another Dynamic Drop Down Tutorial

Yet Another Dynamic Drop Down Tutorial

Hey guys. You are probably sick to death of this type of tutorial, but I have found a method that is better than all of them! It creates a multidimensional array and fills in a select box depending on the other select boxes value. I must mention Megan in here for whom I used some aspects of her tutorial:
The benefits of this method is it builds an array from the database and inputs that into the select form. So no need for using switch.

To see this in action go here:

<cfquery name="getLocal" datasource="#request.dsn#">
SELECT sub.catID,sub.catName,topc.catID AS topID,topc.catName AS topName
FROM subCat sub INNER JOIN topCat topc ON sub.parentID = topc.catID
ORDER BY topName asc,sub.catName asc

So here we join 2 tables. The sub category table and the top level category. If you use 1 table like that Recursion Tutorial sugests, you can simply join the table onto itself.

<script language="JavaScript1.2">
function populate(obj) {
var subcats = new Array(
<cfoutput query="getLocal" group="topName">
<cfoutput>new Array(#currentrow-1#,"#catID#","#catName#","#topID#")<cfif currentrow NEQ recordcount>,</cfif></cfoutput>

// so the above code is creating a multidimensional array and putting in the values from our query

obj.subcat.options.length = 0;
obj.subcat[0] = null;
var optc = 0;

// here we set the vars.We make sure the subcat select has nothing in it before we add to it. We also create our loop counter called optc

for(i=0;i<subcats.length; i++) {
      if(subcats[i][3] == obj.topcat.value) {
            obj.subcat[optc] = new Option(subcats[i][2],subcats[i][1]);
      } else {
            obj.subcat[0] = new Option("- Please select a category -","null");

// the above code loops over the array and does an if statement to filter out the array and only fill the select box with subcategories from the selected category. It then increases our counter by 1.

<form name="myform" action="myactionpage.cfm" method="post">

<select name="topcat" onchange="populate(this.form)"><!-- This is the category selector that will call the function -->
<option>- Select a Category -</option>
<cfoutput query="getLocal" group="topName">
<option value="#topID#">#topName#</option>

<!-- we group the query results by the top level category so that only the top level categories are outputted -->

<select name="subcat">
<option>- Please select a category -</option>

<!-- This is the sub category select box that gets filled in -->


Hopefully that worked for you. Contact me if you have any problems at louisstow AT hotmail DOT com (antispam method. im not crazy)

About This Tutorial
Author: Louis Stowasser
Skill Level: Intermediate 
Platforms Tested: CFMX8
Total Views: 72,882
Submission Date: January 16, 2008
Last Update Date: June 05, 2009
All Tutorials By This Autor: 2
Discuss This Tutorial
  • This was a very very useful tutorial. It solved a lot of my problems. Thank you so much

  • Not Found The requested URL /cfml/louis/multid.cfm was not found on this server.

  • I didn't include an example of the tables for the following reasons: a) This is pretty much an alternative to using switch in megans tutorial b) Your database will be different and you shouldn't design your database around my example. You need to adapt your own database. Thanks Louis

  • Works like a charm! VERY handy.

  • Louis, In Megen's example, she showed the tables and if you would add that to your example it would be VERY helpful, especially to SQL newbies like myself :-) Thanks!

  • Looks good Louis. One problem I'm having is that I'm not using MSSQL, I'm using MySQL and this part confuses me...... subCat sub INNER JOIN topCat topc There are 2 tables, right? One named "Sub" and one named "topc" where does "subCat and "topCat" come from? These are subqueries I know, but I still don't know where subCat and topCat come from. Thanks!

  • you do great work! this is very cool, and useful!

  • Great Job Louis! - I really like this :D - Megan


Website Designed and Developed by Pablo Varando.