<!---
This has been tested on IE 6, NS 7, Mozilla 1.4, Opera 7 and should work on any browser that supports _javascript_ 1.4 or higher.
--->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>_javascript_: Related Selects</title>
<cfoutput>
<!--- The following lines are creating a simulated query to demonstrate the related selects functionality --->
<cfscript>
GetChild = QueryNew("ParentID,ChildID,Child");
QueryAddRow(GetChild);
QuerySetCell(GetChild,"ParentID","1");
QuerySetCell(GetChild,"ChildID","1");
QuerySetCell(GetChild,"Child","Shrimp");
QueryAddRow(GetChild);
QuerySetCell(GetChild,"ParentID","1");
QuerySetCell(GetChild,"ChildID","2");
QuerySetCell(GetChild,"Child","Lobster");
QueryAddRow(GetChild);
QuerySetCell(GetChild,"ParentID","2");
QuerySetCell(GetChild,"ChildID","3");
QuerySetCell(GetChild,"Child","Ribeye");
QueryAddRow(GetChild);
QuerySetCell(GetChild,"ParentID","2");
QuerySetCell(GetChild,"ChildID","4");
QuerySetCell(GetChild,"Child","Sirloin");
GetParent = QueryNew("ParentID,Parent");
QueryAddRow(GetParent);
QuerySetCell(GetParent,"ParentID","1");
QuerySetCell(GetParent,"Parent","Surf");
QueryAddRow(GetParent);
QuerySetCell(GetParent,"ParentID","2");
QuerySetCell(GetParent,"Parent","Turf");
</cfscript>
<script language="_javascript_">
<!--- Create an Array to hold the values for the dependent select control --->
var ChildArray = new Array;
<cfloop query="GetChild">
<!--- For each element of the array, create an object that will hold the value, display and parent value for each option in the dependent selection control --->
ChildArray[ChildArray.length] = {childID: #Val(GetChild.ChildID)#, Child: "#GetChild.Child#", parentID: #GetChild.ParentID#};
<!--- Because a _javascript_ array is a zero index array, the length of the array works as the next incrementally created Array element --->
<!--- A _javascript_ object can be considered similar to a ColdFusion structure. In this case we've declared and set three properties for the individual object held in each element of the array --->
<!--- The object syntax is also more readable than array syntax --->
</cfloop>
function setSelect () {
// It can be more reader friendly in the actual function to fully create shorter references for objects as much as possible
var objForm = document.myForm;
var objParentID = objForm.cboParentID;
var objChildID = objForm.cboChildID;
objChildID.options.length = 0; // This erases the entire contents of the dependent select control
objChildID.options[0] = new Option("- Select One - ","", false, false); // This will set the initial option, the trailing false statements determine if it is a selected option.
for (i = 0; i < ChildArray.length; i++) { // Loop through our array of objects
if (ChildArray[i].parentID == objParentID.value || objParentID.value == '')
// We want to check to see if current value of the array matches the selected value of the calling select control
// We also are checking to see if the selected value of the calling select control is the first selection
// In either case, we'll write a new option to our dependent select option
// If there is no match then we'll skip that row
objChildID.options[objChildID.options.length] = new Option(ChildArray[i].Child,ChildArray[i].childID,false,false);
}
}
</script>
</head>
<body>
<form name="myForm">
Parent:
<select name="cboParentID" > <option value=""> -- Select One -- </option>
<cfloop query="GetParent">
<option value="#GetParent.ParentID#">#GetParent.Parent#</option>
</cfloop>
</select><br>
Child:
<select name="cboChildID">
<option value=""> -- Select One -- </option>
<cfloop query="GetChild">
<option value="#GetChild.ChildID#">#GetChild.Child#</option>
</cfloop>
</select><br>
</form>
</body>
</cfoutput>
</html>
----- Original Message -----
From: Michael Dinowitz
To: CF-Talk
Sent: Wednesday, December 31, 2003 8:12 AM
Subject: Re: Two Selects
Your probably posting with a dividing line of -, _, ~ or the like of 50
characters long or more. Try without the line and it'll work. Your running into
the code I use to remove the footer from all posts.
> Blech, it ate my code!
>
> Let's try that this way:
>
>
>
[Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings]
