Thursday, September 25, 2008

Dynamically populate the second drop down list based on the First Dropdown list

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<!--- 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="cflearn">
SELECT id,Lastname
FROM employee1
</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="#id#" <cfif isDefined('form.select_Main_Group')><cfif form.select_Main_Group eq "#id#">selected</cfif></cfif>>#Lastname#</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="cflearn">
SELECT id, Firstname
FROM employee
WHERE 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="#id1#">#Firstname#</option>
</cfloop>
</select>--->
<cfloop query="get_Sub_Group">
<table>
<tr>
<td>
#firstname#
</td>
</tr>
</table>
</cfloop>
</cfif>
</form>
</cfoutput>
</body>
</html>

No comments: