The following tutorial was designed to be a very easy and quick way to set up dynamic drop down lists (a.k.a. select lists) that are also dependant?meaning that the second drop down list is populated based on the option that is selected from the first drop down list. I?ve looked all over for tutorials on this subject, and there are quite a few. But in my opinion, they are often far more complicated than they really need to be. Not to mention that someone new to the world of web development or programming couldn?t possibly figure out how to implement those examples for his or her own needs.
What I?ve come up with is a very simple example, which involves two queries, two drop down lists, and best of all?no JavaScript. Now, don?t get me wrong, JavaScript has its place, and could certainly help to create a more robust multiple drop down application, but it?s just not necessary to get the job done. And, it turns what should be an easy task into a difficult one for someone who?s unfamiliar with JavaScript.
For simplicities? sake, in this example I am referring to a simple database with four fields. However, this example can certainly be applied to more complex or multiple tables. It is outlined as follows:
Example Database: Our example table contains the following four fields: group_id, group_name, gubgroup_id, subgroup_name
The _id fields are standard unique identifier number fields.
The _name fields are the actual readable main group and subgroup names that correspond id numbers.
Next comes the code.
<!--- store the selected Main_Group variable variable after the first select boxes submits itself --->
<cfif isDefined('form.select_Main_Group')>
<cfset page.select_Main_Group = form.select_Main_Group>
</cfif>
<cfoutput>
<form name="DropDown"
method="post">
<!--- query DB for the first drop down list --->
<cfquery name="get_Main_Group"
datasource="ds">
SELECT group_id, group_name
FROM tblGroups
</cfquery>
<!--- first drop down
list --->
<!--- NOTICE the onChange javascript event in the select tag, this is
what submits the form after the first selection --->
<select name="select_Main_Group"
required="yes"
onchange="this.form.submit()">
<option>Select Main Group</option>
<!--- dynamically populate the
first drop down list based on the get_Main_Group query --->
<!--- NOTICE the CFIF within the option tag, this says,
if the first selection has been made, display the chosen option when the page
reloads --->
<cfloop query="get_Main_Group">
<option
value="#group_id#" <cfif isDefined('form.select_Main_Group')><cfif
form.select_Main_Group eq "#group_id#">selected</cfif></cfif>>#group_name#</option>
</cfloop>
</select>
<p>
<!--- if the first selection has
been made, display the second drop down list with the appropriate results --->
<cfif isDefined('page.select_Main_Group')>
<!--- query DB for second drop down list,
based on the selected item from the first list --->
<cfquery name="get_Sub_Group"
datasource="ds">
SELECT group_id, subgroup_id,
subgroup_name
FROM tblGroups
WHERE group_id = #page.select_Main_Group#
</cfquery>
<!--- second drop
down list --->
<select name="select_Sub_Group"
required="yes">
<option>Select Subgroup</option>
<!--- dynamically
populate the second drop down list based on the get_Sub_Group query --->
<cfloop query="get_Sub_Group">
<option
value="#subgroup_id#">#subgroup_name#</option>
</cfloop>
</select>
</cfif>
</form>
</cfoutput>
<!--- THAT'S ALL THERE IS TO IT! --->
For other useful info, check out:
Just place this code in your page where you want your drop down lists to be and that?s it.
Enjoy!
For more useful info, be sure to check out: www.pushcode.com
-
The easiest method for multiple dynamic and dependant drop down lists, period.
The first EASY method for creating multiple, dependant, database driven drop down select boxes... Honestly!
Author: Ryan M. BeMiller
Views: 25,031
Posted Date: Sunday, July 27, 2003
