I am trying to do a simple related selected, where the second
pulldown is automatically populated with data from a query based on
the first pulldown selection.
I found javascirpt code from the webtricks website that does
exaclty this. All examples have hardcoded values.
I inserted my query and attempted to make the variable name
substitutions, but I obvisouly am doing it wrong, since the second
pulldown does change based on the first pulldown, but all I get are
the ID numbers, not the text (the ID numbers do correspond to the
text though).
My code is below. Can somebody please take a look and tell me
what I am doing wrong ? It seems simple enought but I have been
struggling with this for almost a week now and that is too long. I
just cannot see where he problem is, so I am turning here for help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<cfquery name="GetSites" datasource="recDisc">
select distinct
s.site,
s.siteID,
a.areaID,
a.area
from test_gfmSites s, test_gfmAreas a
where s.siteID = a.siteID
and s.siteID <> 1
</cfquery>
<script language = "JavaScript">
<!--
// For each Site, create an array to hold the areas.
// Each Site array will be identified by the two-character
Site abbreviation
<cfoutput query="GetSites" group="SiteID">
// Create the array
SiteArray#SiteID# = new Array();
<cfset i = 0>
// Populate the array
<cfoutput>
<cfset i = i + 1>
SiteArray#SiteID#[#i#] = #AreaID#;
</cfoutput>
</cfoutput>
// Function to populate the areas for the Site selected
function PopulateArea() {
// Only process the function if the first item is not
selected.
if (document.SiteForm.SiteID.selectedIndex != 0) {
// Find the Site abbreviation
var ThisSite =
document.SiteForm.SiteID[document.SiteForm.SiteID.selectedIndex].value;
// Set the length of the arecode drop down equal to the
length of the Site's array
document.SiteForm.AreaID.length = eval("SiteArray" +
ThisSite + ".length");
// Put 'Select' as the first option in the area code
drop-down
document.SiteForm.AreaID[0].value = "";
document.SiteForm.AreaID[0].text = "Select";
document.SiteForm.AreaID[0].selected = true;
// Loop through the Site's array and populate the area code
drop down.
for (i=1; i<eval("SiteArray" + ThisSite + ".length");
i++) {
document.SiteForm.AreaID
.value = eval("SiteArray" + ThisSite + "");
document.SiteForm.AreaID
.text = eval("SiteArray" + ThisSite + "");
}
}
}
//-->
</script>
<p>A very popular question is how to have the selection
of an item in one drop-down
box automatically populate another drop-down box without
refreshing the page. The answer
is JavaScript! Using arrays, you can have your second select
box be dependent on the
first one. Keep in mind, though, that all the data loads when
the page loads
and lengthy recordsets could mean a longer download
time.</p>
<p>The following example will show each area code for a
Site. When you select a different
Site, the contents of the Area Code box will automatically
change as well.</p>
<form name="SiteForm">
<p>
<table border="0">
<tr>
<td><b>Site</b></td>
<td><b>Area Code</b></td>
</tr>
<tr>
<td>
<select name="SiteID" onClick="PopulateArea()">
<option value="0">Select Site
<cfoutput query="GetSites" group="SiteID">
<option value="#SiteID#">#Site#
</cfoutput>
</select>
</td>
<td>
<select name="AreaID" width="70" style="width:150"
size="1">
<option value="0">Select Area Code
<cfoutput query="GetSites">
<option value="#Area#">#Area#
</cfoutput>
</select>
</td>
</tr>
</table>
</p>
</form>
</body>
</html>
1
Reply
AdChoices