Here's the second 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="remix" 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 deselects all the items
in the dropdown2 box, then it
// Then it loops though all the list of staff members, finding out if
they belong to that department.
// Using the myStaff objects we created above, checking to see if
their departmentID matches the ID
// given to use from the department select box, if so make that item
number selected. We use a counter
// to keep track of how far we are through the list.
--->
function changeStaff() {
// Deselects all the items
for (var i = 0; i < maxStaff;i++) {
document.formName.dropdown2.options[i].selected =
false;
}
// Get the current department ID value.
var departmentID =
document.formName.dropdown1.options[document.formName.dropdown1.select
edIndex].value;
var counter = 0;
// 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 make them selected.
if (myStaff[i].departmentID == departmentID) {
document.formName.dropdown2.options[counter].selected = true;
}
// add one to the counter, to move us onto the next
record.
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 valign="top">
Staff:
</td>
<td>
<select name="staff" size="8" ID="dropdown2" multiple>
<cfoutput query="staff">
<option value="#id#">#title#</option>
</cfoutput>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
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.
