ColdFusion Cascading Dropdown Menus

So far in this blog, I have not shared much about what I do for a living, which is to develop Web-based applications for a small hospital. I don't think posts about my work would be very interesting to most readers, but today I experienced a small programming triumph that I feel compelled to share because I don't think anybody else has figured it out, or if they have, they haven't posted it on the Internet anywhere that I could find it.

The programming issue I was working on involved two dropdown menus: one for a category and another for a subcategory. Ideally, the choices in the subcategory list would be contingent upon what was chosen in the category list instead of displaying every possible subcategory. For example, if you chose "Fruits" as the category in a list of food types that also included "Vegetables", the subcategory choices would be "Apple", "Peach", "Pear", "Plum", etc., without "Broccoli" and "Brussels Sprouts" also showing in the list.

Most of what I do involves ColdFusion programming. ColdFusion is a server-side programming environment that will manipulate variables only when programmed webpages are first loaded. There is no provision for "dynamic" variable manipulation as the user makes changes on a webpage, like filling out a form. For that, I normally use JavaScript, a client-side programming language. The big hurdle is that ColdFusion and JavaScript do not talk to each other very well. It is possible to pass a variable to JavaScript from ColdFusion using a "ToScript" routine, but what I needed was to pass a variable from JavaScript to ColdFusion, which is not possible.

After searching the Web extensively, I came upon a JavaScript script written by Ioannis Cherouvim that presented an HTML version of the solution I was looking for. I copied it and got it working, then customized it with ColdFusion-generated content. It worked!

Here is the complete code:

I apologize that the code is in screenshot images but Blogger tried to parse the code when I pasted it in directly. I also apologize for all the white space, but that was necessary to keep Blogger from resizing the images. Click the images for full-size versions. Email me if you would like the text file.

A couple of notes:

1. Obviously, in order to be useful, the table would need to be enclosed within a form that would post the category and subcategory choices.
2. The queries are pulling from two different tables, one with just the categories and another with both the categories and the subcategories, with the appropriate category repeated for every associated subcategory. It might be simpler to use just the second table and to have the first query point to it with a "distinct" condition.

To see a live example, please click here: ColdFusion Cascading Dropdown Menus

UPDATE: I apologize that the link is no longer valid.