Here's a template that provides two select boxes. In the first box, you select
the make of car you want. The second box is populated with models based on
what you chose in the first box. Comments along the way...
******************* Begin select box example *****************
<cfparam name="inMake" default="Dodge">
<!--- ***************************************************************** --->
<!--- First, we need a list of models for each make. --->
<!--- This gets the Dodge models --->
<!--- ***************************************************************** --->
<cfquery name="getDodgeModels"
datasource="#request.dsn#"
dbtype="odbc">
SELECT DISTINCT charmodel,
charmodelcode
FROM tblModelCodes
WHERE charMakeCode = 'DODG'
ORDER BY charmodel
</cfquery>
<!--- ***************************************************************** --->
<!--- This gets the Kia models --->
<!--- ***************************************************************** --->
<cfquery name="getKiaModels"
datasource="#request.dsn#"
dbtype="odbc">
SELECT DISTINCT charmodel,
charmodelcode
FROM tblModelCodes
WHERE charMakeCode = 'KIA'
ORDER BY charmodel
</cfquery>
<!--- ***************************************************************** --->
<!--- And this gets the Subaru models --->
<!--- ***************************************************************** --->
<cfquery name="getSubaruModels"
datasource="#request.dsn#"
dbtype="odbc">
SELECT DISTINCT charmodel,
charmodelcode
FROM tblModelCodes
WHERE charMakeCode = 'SUBA'
ORDER BY charmodel
</cfquery>
<!--- ***************************************************************** --->
<!--- Here's the form that displays the check boxes. Note the onChange --->
<!--- This app is designed to display the results of this form in a --->
<!--- frame immediately below where this form is displayed. Therefore, --->
<!--- we want to see the result any time the value of the selects are --->
<!--- changed. --->
<!--- Also note the option values in the second select; they're there --->
<!--- just to help the initial display of the drop list. --->
<!--- ***************************************************************** --->
<form name="SearchForm" action="dsp_NCSInstances.cfm" target="bottomhalf"
method="POST">
<select name="SelectMake" onChange="chooseNext();document.SearchForm.submit()">
<option value="Dodge"
<cfif inMake IS "Dodge"> selected</cfif>
>Dodge</option>
<option value="Kia"
<cfif inMake IS "Kia"> selected</cfif>
>Kia</option>
<option value="Subaru"
<cfif inMake IS "Subaru"> selected</cfif>
>Subaru</option>
</select>
<select name="SelectModel" onchange="document.SearchForm.submit()">
<option
value=""> </option>
<option
value=""> </option>
<option
value=""> </option>
<option
value=""> </option>
<option
value=""> </option>
</select>
</form>
</div>
<!--- ***************************************************************** --->
<!--- Now the important parts: some JavaScript. We need the wddx.js --->
<!--- file included (see below) --->
<!--- ***************************************************************** --->
<script type="text/javascript" language="javascript" src="wddx.js">
</script>
<!--- ***************************************************************** --->
<!--- Now we populate a JavaScript array with the models for each make. --->
<!--- ***************************************************************** --->
<cfwddx action="CFML2JS"
input="#getDodgeModels#"
toplevelvariable="jsDodgeTLV"
output="jsDodge">
<cfwddx action="CFML2JS"
input="#getKiaModels#"
toplevelvariable="jsKiaTLV"
output="jsKia">
<cfwddx action="CFML2JS"
input="#getSubaruModels#"
toplevelvariable="jsSubaruTLV"
output="jsSubaru">
<!--- ***************************************************************** --->
<!--- And incorporate them into a JavaScript with the chooseNext function --->
<!--- ***************************************************************** --->
<script language="javascript" >
<cfoutput>#jsDodge#</cfoutput>
<cfoutput>#jsKia#</cfoutput>
<cfoutput>#jsSubaru#</cfoutput>
function chooseNext()
{
if (document.forms[0].SelectMake.selectedIndex==0)
{
document.forms[0].SelectModel.length=0;
for (var RowNum=0;RowNum<jsDodgeTLV.charmodel.length;RowNum++)
{
NewOpt=new Option;
NewOpt.value=jsDodgeTLV.charmodelcode[RowNum];
NewOpt.text=jsDodgeTLV.charmodel[RowNum];
document.forms[0].SelectModel.options[RowNum]=NewOpt;
}
}
if (document.forms[0].SelectMake.selectedIndex==1)
{
document.forms[0].SelectModel.length=0;
for (var RowNum=0;RowNum<jsKiaTLV.charmodel.length;RowNum++)
{
NewOpt = new Option;
NewOpt.value=jsKiaTLV.charmodelcode[RowNum];
NewOpt.text=jsKiaTLV.charmodel[RowNum];
document.forms[0].SelectModel.options[RowNum]=NewOpt;
}
}
if (document.forms[0].SelectMake.selectedIndex==2)
{
document.forms[0].SelectModel.length=0;
for (var RowNum=0;RowNum<jsSubaruTLV.charmodel.length;RowNum++)
{
NewOpt = new Option;
NewOpt.value=jsSubaruTLV.charmodelcode[RowNum];
NewOpt.text=jsSubaruTLV.charmodel[RowNum];
document.forms[0].SelectModel.options[RowNum]=NewOpt;
}
}
document.forms[0].SelectModel.options[0].selected=true;
}
<!--- ***************************************************************** --->
<!--- Finally, we issue the chooseNext command and a form submit to get --->
<!--- the desired initial presentation: the form in place at the top --->
<!--- of the browser window, with a list of vehicles in the bottom that --->
<!--- represents the first model of the first make (Dodge). --->
<!--- ***************************************************************** --->
chooseNext();document.SearchForm.submit()
</script>
******************** End select box example ******************
The only missing piece is wddx.js, which was written by Simeon Simeonov
([EMAIL PROTECTED])and Nate Weiss ([EMAIL PROTECTED]). It handles the Java
WDDX serializations for you so that the second select box gets populated.
It's 20K, so I'm not including it here.
- Jeff
==============================================================
| Jeffrey S. Peters | "Specialization is for insects." |
| [EMAIL PROTECTED] | - Lazarus Long |
| PGP key for Jeffrey S. Peters at ldap://keyserver.pgp.com |
==============================================================
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Structure your ColdFusion code with Fusebox. Get the official book at
http://www.fusionauthority.com/bkinfo.cfm
Archives: http://www.mail-archive.com/[email protected]/
Unsubscribe: http://www.houseoffusion.com/index.cfm?sidebar=lists
