Guess the attachments didn't work too well,
Here's the first file dynamicSelect.cfm.
Sorry 'bout the wrap.
-----8<-----8<-----8<-----8<-----8<-----8<-----
<!---
// Title: Dynamic Select Example
// Created: 11th August 2000
// By: Daniel Kemp
--->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<!--
// Here we get all the info we need from the databases
--->
<!--- These are my two tables, the first one; departments has the
following fields...
// id (int) The unique id of each department.
// title (varchar) The title of each department.
//
// The contents look somewhat like
//
// id | title
// ------|-------------
// 1 | Development
// 2 | Resources
// 3 | Sales
--->
<cfquery name="departments" datasource="yme" dbtype="ODBC">
SELECT *
FROM departments
ORDER BY title
</cfquery>
<!--- The second; staff has the following fields...
// id (int) The unique id of each member of staff
// departmentID (int) The department they are in
// title (varchar) The staff members name
//
// The contents look somewhat like
//
// id | departmentID | title
// ------|----------------------
// 1 | 1 | Bill
// 2 | 1 | Colin
// 3 | 2 | Dave
// 4 | 3 | Eve
// 5 | 2 | Fiona
// 6 | 3 | George
// 7 | 1 | Helen
// 8 | 3 | Ian
//
// Notice in this case I have more then one member of staff in each
department, this is
// to open up the uses of this JavaScript to more people, in Terri's
case there's only
// one default person in each department.
--->
<cfquery name="staff" datasource="yme" dbtype="ODBC">
SELECT *
FROM staff
ORDER BY title
</cfquery>
<!---
// Now onto the funky JavaScript
--->
<script language="JavaScript">
<!---
// This function is kinda like creating our own object like thing,
anyway it's an object
// called anyStaff, which has three properties. I can use it as
such...
// anyStaff.ID = 1
// anyStaff.title = 'Tony'
// anyStaff.departmentID = 6
--->
function anyStaff(ID,title,departmentID) {
this.ID = ID;
this.title = title;
this.departmentID = departmentID;
}
<cfoutput>
<!---
// We are now setting myStaff to be an array of the anyStaff object we
defined above,
// therefore we can now go...
// myStaff[0].ID = 1
// myStaff[0].title = 'bengy'
// etc. etc. for each member of staff we have
--->
var maxStaff = #staff.RecordCount#;
myStaff = new Array(maxStaff);
</cfoutput>
<!---
// And this is the bit that loads up the array,
--->
<cfset counter = 0>
<cfoutput query="staff">
myStaff[#counter#] = new
anyStaff('#ID#','#title#','#departmentID#');
<cfset counter = counter + 1>
</cfoutput>
<!---
// The best way to see what happened is to view the source code
created, which should look something like...
// myStaff[0] = new anyStaff('1','Bill','1');
// myStaff[1] = new anyStaff('2','Colin','1');
// myStaff[2] = new anyStaff('3','Dave','2');
// myStaff[3] = new anyStaff('4','Eve','3');
// myStaff[4] = new anyStaff('5','Fiona','2');
// myStaff[5] = new anyStaff('6','George','3');
// myStaff[6] = new anyStaff('7','Helen','1');
// myStaff[7] = new anyStaff('8','Ian','3');
--->
<!---
// This function does all the hard work, when someone changes the
selection
// in the department box this function is called. To start with it
empties
// out the staff select box, then it attempts to re-populate it. It
starts
// with adding two default lines, and then loops though all the
myStaff
// objects we created above, checking to see if their departmentID
matches
// the ID given to use from the department select box.
--->
function changeStaff() {
// Empty out the staff list box.
document.formName.dropdown2.length = 0;
// Get the current department ID value.
var departmentID =
document.formName.dropdown1.options[document.formName.dropdown1.select
edIndex].value;
// Add the 2 default lines.
document.formName.dropdown2.options[0] = new Option('Select a staff
member',-99);
document.formName.dropdown2.options[1] = new
Option('------------------------------------------------------',-99);
// Set the counter up to add the rest of the recrods.
var counter = 2;
// Now loop through the staff to find the people who belong in this
department.
for (var i = 0; i < maxStaff;i++) {
// If this member of staffs departmentID matches the currently
selected department ID
// then we add them
if (myStaff[i].departmentID == departmentID) {
document.formName.dropdown2.options[counter] = new
Option(myStaff[i].title,myStaff[i].ID);
counter = counter + 1;
}
}
}
</script>
</HEAD>
<body>
<!---
// This is the form
--->
<form action="doSometing.cfm" method="post" name="formName"
enctype="multipart/form-data">
<table>
<tr>
<td>
Department:
</td>
<td>
<select name="department" size="1" id="dropdown1"
onChange="changeStaff(this.form,this.selectedIndex)">
<option value="-99">Select a department</option>
<option
value="-99">------------------------------------------------------</op
tion>
<cfoutput query="departments">
<option value=#id#>#title#</option>
</cfoutput>
</select>
</td>
</tr>
<tr>
<td>
Staff:
</td>
<td>
<select name="staff" size="1" ID="dropdown2">
<option
value="-99">------------------------------------------------------</op
tion>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
-----8<-----8<-----8<-----8<-----8<-----8<-----
This message is intended only for the use of the person(s) ("the intended
recipient(s)") to whom it is addressed.
It may contain information which is privileged and confidential within the meaning of
the applicable law. If you are not the intended recipient, please contact the sender
as soon as possible.The views expressed in this communication may not necessarily be
the views held by Live Information Systems Limited.
------------------------------------------------------------------------------
Archives: http://www.mail-archive.com/[email protected]/
To Unsubscribe visit
http://www.houseoffusion.com/index.cfm?sidebar=lists&body=lists/cf_talk or send a
message to [EMAIL PROTECTED] with 'unsubscribe' in the body.
