Check out http://www.webtricks.com/SourceCode/
Heres the code. If you need further details go there.
<!--- Select the states and area codes. --->
<CFQUERY DATASOURCE = "States" NAME = "GetStates">
SELECT S.State, S.StateCode, AC.AreaCode
FROM States S, AreaCodes AC
WHERE S.StateCode = AC.StateCode
ORDER BY S.State, AC.AreaCode
</CFQUERY>
<!--- Select all the area codes. --->
<CFQUERY DATASOURCE = "States" NAME = "GetCodes">
SELECT AreaCode
FROM AreaCodes
ORDER BY AreaCode
</CFQUERY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
// For each state, create an array to hold the area codes.
// Each state array will be identified by the two-character
state abbreviation
<CFOUTPUT QUERY = "GetStates" GROUP = "State">
// Create the array
StateArray#StateCode# = new Array();
<CFSET i = 0>
// Populate the array
<CFOUTPUT>
<CFSET i = i + 1>
StateArray#StateCode#[#i#] = #AreaCode#;
</CFOUTPUT>
</CFOUTPUT>
// Function to populate the area codes for the state selected
function PopulateAreaCode()
{
// Only process the function if the first item is not
selected.
if (document.StateForm.StateCode.selectedIndex != 0)
{
// Find the state abbreviation
var ThisState =
document.StateForm.StateCode[document.StateForm.StateCode.selectedIndex]
value;
// Set the length of the arecode drop down equal
to the length of the state's array
document.StateForm.AreaCode.length =
eval("StateArray" + ThisState + ".length");
// Put 'Select' as the first option in the area
code drop-down
document.StateForm.AreaCode[0].value = "";
document.StateForm.AreaCode[0].text = "Select";
document.StateForm.AreaCode[0].selected = true;
// Loop through the state's array and populate
the area code drop down.
for (i=1; i<eval("StateArray" + ThisState +
".length"); i++)
{
document.StateForm.AreaCode[i].value =
eval("StateArray" + ThisState + "[i]");
document.StateForm.AreaCode[i].text =
eval("StateArray" + ThisState + "[i]");
}
}
}
//-->
</SCRIPT>
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>
The following example will show each area code for a state. When you
select a different
state, the contents of the Area Code box will automatically change as
well.
<FORM NAME = "StateForm">
<TABLE BORDER = "0">
<TR>
<TD><B>State</B></TD>
<TD><B>Area Code</B></TD>
</TR>
<TR>
<TD>
<SELECT NAME = "StateCode" onChange =
"PopulateAreaCode()">
<OPTION VALUE = "0">Select State
<CFOUTPUT QUERY = "GetStates" GROUP =
"State">
<OPTION VALUE =
"#StateCode#">#State#
</CFOUTPUT>
</SELECT>
</TD>
<TD>
<SELECT NAME = "AreaCode" WIDTH = "70" STYLE =
"width:70" SIZE = "1">
<OPTION VALUE = "0">Select Area Code
<CFOUTPUT QUERY = "GetCodes">
<OPTION VALUE =
"#AreaCode#">#AreaCode#
</CFOUTPUT>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
-----Original Message-----
From: Graham Pearson [mailto:[EMAIL PROTECTED]]
Sent: 25 March 2002 15:06
To: CF-Talk
Subject: RE: Two related drop-downs
I am looking at qforms for my 6 Related Select Drop Down boxes, however
I
am not into javascript. All of my information for the related select
boxes
are in various queries. How would I take those queries and put them into
the javascript section so it will work.
Any Suggestions.
At 10:57 AM 3/22/2002 -0600, you wrote:
>I highly recommend checking out qForms before you start rolling your
own
>javascript!
>
>http://www.pengoworks.com/index.cfm?action=qForms
>
>Adam.
>
>
>
> > -----Original Message-----
> > From: Frank Mamone [mailto:[EMAIL PROTECTED]]
> > Sent: Friday, March 22, 2002 10:52 AM
> > To: CF-Talk
> > Subject: Two related drop-downs
> >
> >
> > I need a cross-browser solution to populate a drop-down based
> > on the value
> > selected in another drop-down. I have don this many times for
> > IE. I usually
> > use an IFRAMe to permory a query and populate the second
> > drop-down using
> > Javascript.
> >
> > Since NS doesn't support IFRAMES and I really don'e want to
> > use a frameset
> > at all, I think that if I store the recordset of possible values in
a
> > Javascript array when the page loads and then query that
> > array when the
> > first drop-down values is changed it should work.
> >
> > Javascript arrays not my strongpoint yet. Does anyone have an
> > example of
> > this?
> >
> > Thanks,
> > Frank Mamone
> >
> >
>
______________________________________________________________________
Get the mailserver that powers this list at http://www.coolfusion.com
FAQ: http://www.thenetprofits.co.uk/coldfusion/faq
Archives: http://www.mail-archive.com/cf-talk@houseoffusion.com/
Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
