asked on

Multiple Related Selects with ColdFusion and JavaScript

I'm trying to modify the code Steve Durette posted at http://tutorial196.easycfm.com/

I got the page working, but only the first dropdown has any data in it. The other two selects just display the initial values; i.e. "Choose Volume" and "Choose PriGroup".

Please help me get the other two selects working. Thank you in advance, Jon

I am a fairly novice ColdFusion developer, and I do not know JavaScript...

p.s. I plan on following up with a second question to address the below text, but the loop may be the reason the 2nd and 3rd selects aren't working, so I figured I would at least explain now:

I only want to have one row of dropdown selects, but Steve Durette's code has a loop in it for 5 rows. I could not figure out how to (correctly) remove the loop, so I just changed the loop to output one row; i.e. <cfloop from="1" to="1" index="Variables.myLoop">

<!DOVolPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <title>Multiple three selects related</title>
 
<CFQUERY DATASOURCE="#Application.DSN#" NAME="getVolumes">
	SELECT DISTINCT Impact, Volume, PriGroup
	FROM dbo.tblActionItems
	GROUP BY Impact, Volume, PriGroup ORDER BY Impact, Volume, PriGroup
</CFQUERY>
 
<script language="JavaScript">
   <!--
        //create the initial array to hold the different records.
        var aryLocation = new Array();
        //Now to bring in the data. This is a combination of 
        //ColdFusion and JavaScript
 
        <cfset Variables.JSLoop = 0>
        <cfoutput>
            //The next lines create an array of 3 items in the
            //outer array. It could hold more than three items
            //if we needed more than 3 selects related.
            <cfloop query="getVolumes">
                aryLocation[#Variables.JSLoop#] = new Array("#getVolumes.Impact#", "#getVolumes.Volume#", "#getVolumes.PriGroup#");
            <cfset Variables.JSLoop = Variables.JSLoop + 1>
            </cfloop>
        </cfoutput>
 
        function tsrUpdSelects(frstSel, scndSel, thrdSel, thisSel) {
           //This function takes four arguments.
           /*
                 They will be the frstSel (the Impact select box), the scndSel (the Volume select box),
                 the thrdSel (the PriGroup select box) and thisSel (the select box that
                  actually called for the change to occur).
           */
            //local variables
            var i; var chkVol = "";
 
            //see if we just changed the first select box (Impact).
            if(thisSelect.name == frstSelect.name) {
                 //set the length of the other selects to zero to empty them
                 scndSel.options.length = 0;
                 thrdSel.options.length = 0;
 
            //set the first option for each (being messages to do a select).
                 scndSel.options[scndSel.length] = new Option("Choose Volume", "");
                 thrdSel.options[thrdSel.length] = new Option("Choose PriGroup", "");
 
            //Now loop through and set the second option list (Volume).
            //If a Impact was chosen. There is also code to prevent duplicate
            //cities. This could happen if a Volume had multiple PriGroupes.
                if(thisSel.options[thisSel.selectedIndex].value != "") {
                     for (i = 0; i < aryLocation.length; i++) {
                             if(aryLocation[I][0] == thisSel.options[thisSel.selectedIndex].value && chkVol.lastIndexOf(aryLocation[i][1] == -1) { scndSel.options[scndSel.length] = new Option(aryLocation[i][1], aryLocation[i][1]); chkVol = chkVol + "," + aryLocation[i][1];
                             }
                     }
                 }
             }
             //see if we just changed the second select box(Volume).
                if(thisSel.name == scndSel.name) {
                     //set the length of the third select to zero.
                        thrdSel.options.length = 0;
                        //set the first option.
                            thrdSel.options[thrdSel.length] = new Option("Choose PriGroup", "");
                            //set the rest of the values if a Volume was chosen.
                                for(i=0; i < aryLocation.length; i++) {
                                    if(aryLocation[i][0] == frstSel.options[frstSel.selectedIndex].value && aryLocation[i][1] == scndSel.options[scndSel.selectedIndex].value) { thrdSel.options[thrdSel.length] = new Option(aryLocation[i][2], aryLocation[i][2])
                                    }
                                 }
         }
    }
//-->
</script>
 
</head>
<body>
 
<cfoutput>
  <form method="post" name="testForm">
  <table>
   <tr>
    <th>Impact</th>
    <th>Volume</th>
    <th>PriGroup</th>
   </tr>
   <cfloop from="1" to="1" index="Variables.myLoop">
   <tr>
     <td>
     <cfset ImpactList = "">
    <select name="myImpact#myLoop#" onChange="tsrUpdSelects(this, testForm.myVolume#myLoop#, testForm.myPriG#myLoop#, this);">
       <option value="" selected>Choose Impact</option>
       <cfloop query="getVolumes">
        <cfif not listFindNoCase(ImpactList, getVolumes.Impact, ",")>
        <option value="#getVolumes.Impact#"> #getVolumes.Impact# </option>
        <cfset ImpactList = listAppend(ImpactList, getVolumes.Impact, ",")>
        </cfif>
        </cfloop>
     </select>
     </td>
     <td>
     <select name="myVolume#myLoop#" onChange="tsrUpdSelect(testForm.myImpact#myLoop#, this, testForm.myPriG#myLoop#, this);">
      <option value="" selected>Choose Volume</option>
      </select>
      </td>
      <td>
        <select name="myPriG#myLoop#">
            <option value="" selected>Choose PriGroup</option>
        </select>
      </td>
    </tr>
    </cfloop>
  </table>
  </form>
  </cfoutput>
</body>
</html>

Open in new window

galadore

Two files pasted below - one is a multiselectrelated tag, the other is an explanatory HTML file that should help you out.

MultiRelatedSelects.cfm
<!--- -->
List of attributes:
1. SelectBoxes (required)
2. Query (required)
3. FieldName1....FieldNamen (required)
4. Display1....Displayn (optional)
5. Value1....Valuen (required)
6. SelectedValue1......SelectedValuen (optional)
7. FunctionName (optional)
8. Onclick1....OnClickn (optional)
 
<!-- --->
<cfparam name="attributes.Query">
<cfparam name="attributes.SelectBoxes" default=0>
<cfparam name="attributes.msg" default="">
<cfparam name="attributes.FunctionName" default="Sel">
<cfif len(attributes.Query) eq 0>
	<CFSET attributes.msg= attributes.msg & "<br>Please specify a query to be processed.">
</cfif>
<cfif not isnumeric(attributes.SelectBoxes) or  attributes.SelectBoxes eq 0>
	<CFSET attributes.msg= attributes.msg & "<br>Please enter a positive integer for the number of select boxes you want.">
</cfif>
<cfif not isdefined("attributes.FormName")>
	<CFSET attributes.msg= attributes.msg & "<br>Please specify a form name.">
</cfif>
<cfloop from="1" to="#attributes.SelectBoxes#" index="sel">
	<cfif not isdefined("attributes.Value#sel#")>
		<cfset attributes.msg=attributes.msg & "<br>Please specify the value attribute for each select box. For eg. Value1, Value2 .....till the number of SelectBoxes">
	</cfif>
	<cfif not isdefined("attributes.FieldName#sel#")>
		<cfset attributes.msg=attributes.msg & "<br>Please specify the form field name attribute for each select box. For eg. FieldName1, FieldName1 .....till the number of SelectBoxes">
	</cfif>
</cfloop>
 
 
 
<cfif len(attributes.msg) eq 0>
<!---Tag Code--->
	<cfset qry=#evaluate("caller." & attributes.Query)#>
	<script language="JavaScript">
		var <cfoutput>#attributes.FunctionName#</cfoutput>_optValArr = new Array();
		<cfset loopCtr = 0>
		
		<cfoutput query="qry">
			#attributes.FunctionName#_optValArr[#loopCtr#] = new Array(<cfloop from="1" to="#attributes.Selectboxes#" index="item">new Array("<cfif isdefined("attributes.Display#item#")>#evaluate(evaluate("attributes.Display" & item))#<cfelse>#evaluate(evaluate("attributes.Value" & item))#</cfif>","#evaluate(evaluate("attributes.Value" & item))#") <cfif item lt attributes.Selectboxes>,</cfif></cfloop>);
			<cfset loopCtr=incrementValue(loopCtr)>
		</cfoutput>
		<cfoutput>
		<cfset selList="">
		<cfloop from="1" to="#attributes.SelectBoxes#" index="item">
			<cfset selList=ListAppend(selList,"Sel" & item)>
		</cfloop>
		function <cfoutput>#attributes.FunctionName#</cfoutput>(thisSel,pos,nextSel,subNodes) {
				for (i = 0; i < subNodes.length; i++) {
					subNodes[i].options.length=0;
					subNodes[i].options[0]=new Option("                            ","");
				}
                if(thisSel.options[thisSel.selectedIndex].value != "") {
					optPos=1;
					lastVal="";
					for (i = 0; i < <cfoutput>#attributes.FunctionName#</cfoutput>_optValArr.length; i++) {
						if(<cfoutput>#attributes.FunctionName#</cfoutput>_optValArr[i][pos][1]==thisSel.options[thisSel.selectedIndex].value){
							if(<cfoutput>#attributes.FunctionName#</cfoutput>_optValArr[i][eval(pos+1)][1]!=lastVal){
								lastVal=<cfoutput>#attributes.FunctionName#</cfoutput>_optValArr[i][eval(pos+1)][1];
								subNodes[0].options[optPos]=new Option(<cfoutput>#attributes.FunctionName#</cfoutput>_optValArr[i][eval(pos+1)][0],<cfoutput>#attributes.FunctionName#</cfoutput>_optValArr[i][eval(pos+1)][1]);
								optPos++;
							}
						}
					}
                }
		}
		
             
    
 
	</cfoutput>
	</script>
		<cfloop from="1" to="#attributes.SelectBoxes#" index="SelBox">
		
		<cfoutput><select name="#evaluate("attributes.FieldName" & SelBox)#" <cfif SelBox lt attributes.SelectBoxes>onchange="#attributes.FunctionName#(this,#evaluate(SelBox-1)#,this.form.#evaluate("attributes.FieldName" & (SelBox+1))#,new Array(<cfloop from="#(SelBox+1)#" to="#attributes.SelectBoxes#" index="nextSel">this.form.#evaluate("attributes.FieldName" & (nextSel))#<cfif nextSel lt attributes.SelectBoxes>,</cfif></cfloop>));<cfif isdefined("attributes.OnChange#SelBox#")>;#evaluate("attributes.OnChange" & SelBox)#;</cfif>"<cfelse><cfif isdefined("attributes.OnChange#SelBox#")>OnChange="#evaluate("attributes.OnChange" & SelBox)#;"</cfif></cfif>></cfoutput>
			<cfif SelBox eq 1>
			<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
			<cfoutput query="qry" Group="#evaluate("attributes.Value" & SelBox)#">
				<option value="#evaluate(evaluate("attributes.value" & SelBox))#" <cfif isdefined("attributes.SelectedValue" & SelBox) and evaluate("attributes.SelectedValue" & SelBox) eq evaluate(evaluate("attributes.value" & SelBox))>SELECTED</cfif>><cfif isdefined("attributes.Display#SelBox#")>#evaluate(evaluate("attributes.Display" & SelBox))#<cfelse>#evaluate(evaluate("attributes.Value" & SelBox))#</cfif></option>
			</cfoutput>
			<cfelse>
				<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option> 
				<cfif isdefined("attributes.SelectedValue" & SelBox)>
					<!---Get the values available for this set--->
					<cfoutput query="qry" Group="#evaluate("attributes.Value" & SelBox)#">
					<cfif evaluate("attributes.SelectedValue" & (SelBox-1)) eq evaluate(evaluate("attributes.value" & (SelBox-1)))>
						<option value="#evaluate(evaluate("attributes.value" & SelBox))#" <cfif isdefined("attributes.SelectedValue" & SelBox) and evaluate("attributes.SelectedValue" & SelBox) eq evaluate(evaluate("attributes.value" & SelBox))>SELECTED</cfif>><cfif isdefined("attributes.Display#SelBox#")>#evaluate(evaluate("attributes.Display" & SelBox))#<cfelse>#evaluate(evaluate("attributes.Value" & SelBox))#</cfif></option>
					</cfif>
					</cfoutput>
				</cfif>
			</cfif>
		</select>
		<cfoutput><cfif isdefined("attributes.HtmlAfter#SelBox#")>#evaluate("attributes.HtmlAfter" & SelBox)#</cfif></cfoutput>
	</cfloop>
<!---tag code ends--->
<cfelse>
	<Cftry>
	
	<CFTHROW  detail="#attributes.msg#" message="Error encountered while processing the CF_MultiRelatedSelects tag.">
	<cfcatch type="Any">
	<cfoutput>#cfcatch.detail#</cfoutput>
	</cfcatch>
	</cftry>
</cfif>
 
 
 
--------------------------------
 
 
 
 
 
<H2>&lt;CF_ThreeSelectsRelated&gt;</H2>
 
<I>See also CF_TwoSelectsRelated.</I>
Puts three SELECT form elements onto the current page, which contain choices from any query.
The three SELECTs are related -- when the user chooses an item from the first SELECT, the items
from the second SELECT are "filled" with corresponding items for the user to choose from.  Then, 
when the user chooses an item from the second SELECT, the items
from the third SELECT are "filled" with corresponding items for the user to choose from.
Also, the first select can be as a series of RADIO boxes instead of a SELECT if you wish.
 
 
<P>Should work under Javascript 1.1 compliant browsers (which means Navigator 3.0 and up, and IE4.0 and up).
Will not with other browsers.
 
<P><B>Parameters</B><BR>
NOTE: Most of the parameters come in threes (for instance, NAME1, NAME2, NAME3).  The first
parameter affects the first SELECT list, and the "2" parameter affects the second SELECT list, etc.
Depending on whether you count each of these triplets as one parameter or three, I think 
this tag may actually have beat the fearsome CFGRID tag for number of parameters!
 
<P>
 
<TABLE BORDER>
  <TR VALIGN="TOP"><TD>QUERY</TD>
	  <TD>
		  Required.  
			The name of the query from which the SELECT elements will be populated.  
			The query is probably generated by a CFQUERY tag, but could also be generated by other Cold Fusion tags that return query result sets.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>NAME1,<BR>NAME2<BR>NAME3</TD>
	  <TD>
		  The names of the SELECT list elements to be included on the form.
			The SELECT element with NAME1 will appear first on the page, and the one with NAME2 will be second, etc.
			For instance, if you use NAME2="Selection", then whatever the user chooses in the second SELECT will
			be available to for your use as #Form.Selection# in the next template.
			If omitted, NAME1 will be TwoSelectsRelated1 and NAME2 will be TwoSelectsRelated2, etc.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>DISPLAY1,<BR>DISPLAY2<BR>DISPLAY3</TD>
	  <TD>
		  Required.  
			The columns in QUERY that will populate the SELECT elements.  
			This is what the user sees on the page.
 
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>VALUE1,<BR>VALUE2<BR>VALUE3</TD>
	  <TD>
		  The columns in QUERY that provide the values for the second SELECT element when submitted.  
			If omitted, the column you supply for DISPLAY is used.  
			Provide this parameter if, for instance, you wanted a category "code" to be submitted to the next Cold Fusion template,
			but want the user to be able to choose the category by its friendly DISPLAY name.
 
      <P>
			It is critical that the query's results be sorted by the column you specify for VALUE1, then the column you specify for VALUE2.
			So, if for example you specify DISPLAY1="CustomerID" and DISPLAY2="OrderID" for this tag, you must have
			<I>ORDER BY CustomerID, OrderID</I> in the CFQUERY you specified in QUERY.
			(If you find this confusing, see the <A HREF="http://www.allaire.com/products/coldfusion/documents/CF31UserGuide/user/ug040014.htm#I2">CF Documentation that explains</A> the GROUP
			parameter of the CFOUTPUT tag--the theory is the same.)
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>DEFAULT1,<BR>DEFAULT2,<BR>DEFAULT3</TD>
	  <TD>
		  Optional.  Values that determine which items in the SELECT lists are pre-selected when the web page appears.
			So, if VALUE1="CustomerID" and DEFAULT1="5", then first SELECT will appear with Customer 5 pre-selected.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>MULTIPLE3</TD>
	  <TD>
		  Optional.  Yes or No.  If MULTIPLE3="YES", then the user can choose more than one
			item from the third SELECT list (by holding down the Ctrl key in Windows, and some other strange key on the Mac... I think it's an iconic representation of Steve Jobs' head or something).
			
			<P>Note that there is no MULTIPLE1 or MULTIPLE2 (this would be hard... maybe next time around).
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>TYPE1</TD>
	  <TD>
		  Optional.  RADIO or SELECT.  If omitted, the default is SELECT.
			If TYPE1="RADIO", the first SELECT will be rendered as a series of Radio buttons rather than a SELECT list.
			In such a case, WIDTH1, SIZE1, FORCEWIDTH1, and EMPTYTEXT1 are all ignored.
 
      <P>Note that there is no TYPE2 or TYPE3.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>SIZE1,<BR>SIZE2<BR>SIZE3</TD>
	  <TD>
		  Just like the SIZE attribute of a normal SELECT form element.
			If omitted, the default is 1, which makes the SELECT appear as a "drop-down list".
			
			<P>Instead of supplying a number, you can also supply the word "Auto".
			If SIZE1="Auto", the first select will be the same size as the number of options it has (no scrollbars).
			If SIZE2="Auto", the second select will be the same size as the first select.
			
			<P>SIZE1 has no effect if TYPE1="RADIO".
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>WIDTH1,<BR>WIDTH2<BR>WIDTH3</TD>
	  <TD>
		  The width of the SELECT element, using CSS measurement syntax.
			For instance, WIDTH1="150px" would make the first SELECT be 150 pixels wide.
			As of this writing, IE4 is the only browser that "obeys" this width.
 
			<P>WIDTH1 has no effect if TYPE1="RADIO".
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>FORCEWIDTH1,<BR>FORCEWIDTH2,<BR>FORCEWIDTH3</TD>
	  <TD>
      For browsers that don't obey WIDTH, you can use FORCEWIDTH to control the width of the SELECT
			boxes, although with somewhat less precision.  Each SELECT element will have an "empty" OPTION at the bottom...
			the number you supply for FORCEWIDTH causes the "display text" of this last OPTION to be "padded" with nonbreakingspace characters.
			So FORCEWIDTH="30" causes the SELECT to be at least 30 spaces wide... how wide that actually is depends on the font the browser uses to display the SELECT.
			Also, if any of the items in DISPLAY are "wider" than SIZE number of spaces, then the SELECT will be that wide instead.
 
			<P>FORCEWIDTH1 has no effect if TYPE1="RADIO".
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>FORCEWIDTHCHAR</TD>
	  <TD>
      If you want to use some other character than nonbreaking spaces for FORCEWIDTH (above), specify that character here.
			So FORCEWIDTHCHAR="=" would cause the last OPTION in the SELECT to be "padded" with 30 = signs instead of 30 spaces, etc.
 
  <TR VALIGN="TOP"><TD>EMPTYTEXT1,<BR>EMPTYTEXT2,<BR>EMPTYTEXT3</TD>
	  <TD>
      If you want to force the user to make a choice from one of the SELECT elements, provide a short message here.
			The text you supply will appear as the first choice in the corresponding SELECT element.  For instance, you might use EMPTYTEXT1="(choose a category)"
			so that the user will be compelled to click on something to proceed.
 
			<P>EMPTYTEXT1 has no effect if TYPE1="RADIO".
			
  <TR VALIGN="TOP"><TD>EXTRAOPTIONS2,<BR>EXTRAOPTIONS3</TD>
	  <TD>
      Netscape browsers tend to act strangely when the number of options in a SELECT list changes after the web page appears,
			and the SIZE of the SELECT is 1.  Instead of making the drop-down list be long enough to hold the options, the drop-down list retains its original length.  So if there is only one or two options in the SELECT when the page first appears, tiny scroll bars are forced to appear in the drop-down list, which look kind of silly.
			To get around this, you can supply a number here--that number of empty options will be added to the SELECT lists when
			the web page is first displayed.  So if SIZE2="1" and you know that the number of choices in the second select will 
			be small when the form appears, and the number of choices is likely to get bigger as the user interacts with the form, then
			you may want to add an EXTRAOPTIONS2="5" parameter to assure that the second select behaves intuitively.
 
			<P>Note that there is no EXTRAOPTIONS1.
			
  <TR VALIGN="TOP"><TD>MESSAGE1,<BR>MESSAGE2,<BR>MESSAGE3</TD>
	  <TD>
		  You can demand that the user pick an item from a SELECT box before proceeding. 
			If they do not pick an item, they cannot submit the form.  Also, if the item they choose
			has no value (if the value you supplied for the VALUE parameter is blank or null), they cannot submit the form.
			This means that the extra item generated by	the EMPTYTEXT or FORCEWIDTH choices do not "count" as a choice.
			
			<P>To make input be required, add a javascript onSubmit handler to the FORM tag that this tag is in.
			The syntax is <B>onSubmit="return require_Name1()"</B> (where Name1 is whatever you supplied for NAME1 in this tag). See example below.
			To make the first and select boxes be required, use onSubmit="return require_Name1AndName2()".
			To make all three be required, use onSubmit="return require_Name1AndName2AndName3()".
			<B>The text inside the quotes for these onSubmit items is Javascript, so it's case sensitive!</B>
	
      <P>If you want a custom message to appear to the user when they are not allowed to proceed, provide
			that text here as MESSAGE1, MESSAGE2, or MESSAGE3.  Otherwise, the default message will be used:
			"You must choose an option for <I>NAME</I>."
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>HTMLAFTER1,<BR>HTMLAFTER2</TD>
	  <TD>
		  Insert any HTML code that you want to be output between the first and sencond SELECTs (for instance, a &lt;BR&gt; tag to put a line break between them) for HTMLAFTER1.  
			If omitted, the second select will appear directly to the right of the first.  Same with HTMLAFTER2.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>HTMLAFTEREACHRADIO1</TD>
	  <TD>
		  If TYPE1="RADIO", you can insert any HTML code that you want to be output after each RADIO button that is generated onto your form.
			For instance, HTMLAFTEREACHRADIO1="&lt;BR&gt;" would cause each Radio button to appear on a new line, with the radio buttons themselves neatly aligned.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>ONCHANGE</TD>
	  <TD>
		  You can put any Javascript code that want to execute when the user makes a selection from the third SELECT in here...
			it will be passed directly through to the onChange handler of the second SELECT tag itself.
			For instance, <FONT SIZE="-1"><XMP>ONCHANGE="alert('You picked '+this.options[this.options.selectedIndex].text)"</XMP></FONT> would display a dialog box to the user when they made their selection.
			Keep in mind that this is Javascript code you're providing here, which means that it's case-sensitive.
			<P>
			There are two "magic" values that you can supply for ONCHANGE as "shortcuts" to writing this kind of javascript code yourself:
			<LI>
			ONCHANGE="Submit!" will cause the form to be submitted automatically when the user makes a selection.
			Use this when you don't want to make the user click a Submit button to submit the form.
			<LI>
			ONCHANGE="Jump!" will cause the current window's URL to change to the value of the second select item.
			When you use this, it's assumed that the column you specified for VALUE2 has URLs in it, otherwise you will most likely get a "Not Found" type of error in your browser.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>AUTOSELECTFIRST</TD>
	  <TD>
		  YES or NO (default is YES).  
			If YES, then when the user selects an item from the second SELECT, the first item of 
			the third SELECT is selected automatically.  In general, you will want to use AUTOSELECTFIRST="YES"
			when SIZE3="1" and NO when SIZE3 is greater than 1.  Try it out... it's easier to see than to explain.
		</TD></TR>
 
  <TR VALIGN="TOP"><TD>FORMNAME</TD>
	  <TD>
      The name (as specified in the NAME parameter of the FORM tag) of the form that this CF_TwoSelectsRelated tag is in.
			If omitted, defaults to <NOBR>FORMNAME="forms[0]"</NOBR>, which will be fine unless there is another form on the same page
			above the current form.  Note that form names are case-sensitive as far as javascript is concerned, so if you supply
			this parameter, make sure that the capitalization matches the FORM's NAME parameter exactly, or else all sorts of javascript errors will occur.
		</TD></TR>
 
</TABLE>		
 
 
<P><B>Examples</B><BR>
The following examples assume that the this CFQUERY tag has been run first.
The sample data I'm using in these examples is shown under the query.
<XMP>
<CFQUERY NAME="GetData" DATASOURCE="A2Z">
  SELECT Customers.CustomerID, Customers.Company, Category.ID, Category.Category, Inventory.BookID, Inventory.Title
  FROM Category, Customers, Inventory, OrderItems, Orders
  WHERE Category.ID = Inventory.CategoryID AND OrderItems.BookID = Inventory.BookID AND Orders.OrderID = OrderItems.OrderID AND Customers.CustomerID = Orders.CustomerID
  ORDER BY Customers.CustomerID, Category.ID
</CFQUERY>
</XMP>
<TABLE  ><TR><TH><FONT SIZE=-1>CUSTOMERID </TH><TH><FONT SIZE=-1>COMPANY </TH><TH><FONT SIZE=-1>ID </TH><TH><FONT SIZE=-1>CATEGORY </TH><TH><FONT SIZE=-1>BOOKID </TH><TH><FONT SIZE=-1>TITLE </TH></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>10</TD><TD><FONT SIZE=-1>Sabbath's Theater</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>9</TD><TD><FONT SIZE=-1>The Dead Father</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>8</TD><TD><FONT SIZE=-1>The Armies Of The Night</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>4</TD><TD><FONT SIZE=-1>Life, the Universe and Everything</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>The Restaurant at the End of the Universe</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>The Hitchhiker's Guide to the Galaxy</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>5</TD><TD><FONT SIZE=-1>The Cold Fusion Web Database Construction Kit</TD></TR><TR><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>ABC Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>7</TD><TD><FONT SIZE=-1>Using ASP For Unknown Reasons</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>11</TD><TD><FONT SIZE=-1>Tabloid Dreams</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Literature</TD><TD><FONT SIZE=-1>1</TD><TD><FONT SIZE=-1>Moby Dick</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>Humor</TD><TD><FONT SIZE=-1>4</TD><TD><FONT SIZE=-1>Life, the Universe and Everything</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>6</TD><TD><FONT SIZE=-1>Special Edition Using Windows NT Server 4</TD></TR><TR><TD><FONT SIZE=-1>2</TD><TD><FONT SIZE=-1>DEF Company</TD><TD><FONT SIZE=-1>3</TD><TD><FONT SIZE=-1>Computers</TD><TD><FONT SIZE=-1>5</TD><TD><FONT SIZE=-1>The Cold Fusion Web Database Construction Kit</TD></TR></TABLE>
 
 
 
 
<P><B>Example 1</B>
 
<XMP><FORM ACTION="TestTwoSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()">
 
<CF_ThreeSelectsRelated
  QUERY="GetData"
  HTMLAFTER2="<BR>"
  NAME1="Sel1"
  NAME2="Sel2"
  NAME3="Sel3"
  VALUE1="CustomerID"
  VALUE2="ID"
  VALUE3="BookID"
  DISPLAY1="Company"
  DISPLAY2="Category"
  DISPLAY3="Title"
  DEFAULT1="1"
  SIZE1="3"
  SIZE2="3"
  SIZE3="5"
  WIDTH1="150"
  WIDTH2="150"
  WIDTH3="300"
  FORCEWIDTH1="40"
  FORCEWIDTH2="40"
  FORCEWIDTH3="90"
  AUTOSELECTFIRST="No"
  MULTIPLE3="Yes">
 
<BR><INPUT TYPE="Submit">
 
</FORM>
</XMP>
 
 
 
 
<FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Select1AndSelect2AndSelect3()">
 
 
	<SCRIPT LANGUAGE="JavaScript1.1">
	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)
		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html
	  var maxlength = 10;
	  OneA = new Array;
 
		var trueLength = OneA.length;  
		var lst = OneA.length;
    var Trak = 0;
 
    function require_Select1() {
		  with (document.forms[0].Select1) {
			  RetVal = true;
			  if (Trak == -1) RetVal = false; 
				  
				  else RetVal = !(options[Trak].value == '');
					
			  if (!RetVal) alert('You must choose an option for Select1.');
				return RetVal;
			}
		}
 
    function require_Select2() {
		  with (document.forms[0].Select2) {
			  RetVal = true;
			  if (selectedIndex == -1) RetVal = false;
				  else RetVal = !(options[selectedIndex].value == '');
			  if (!RetVal) alert('You must choose an option for Select2.');
        return eval(RetVal);
				return RetVal;
			}
		}
		
    function require_Select3() {
		  with (document.forms[0].Select3) {
			  RetVal = true;
			  if (selectedIndex == -1) RetVal = false;
				  else RetVal = !(options[selectedIndex].value == '');
			  if (!RetVal) alert('You must choose an option for Select3.');
				return RetVal
			}
		}
		
		function require_Select1AndSelect2() {
		  return ((require_Select1()) && (require_Select2()));
		}
 
		function require_Select2AndSelect3() {
		  return ((require_Select2()) && (require_Select3()));
		}
		
		function require_Select1AndSelect2AndSelect3() {
		  return ((require_Select1AndSelect2()) && (require_Select3()));
		}
				
		function forms0ChangeMenu(menuNum) {
		   OneA.length = 0;
		   if (menuNum == null) return;  
			 Trak = menuNum;
			 
			 
			 if (document.forms[0].Select1.options[menuNum].value == '') return;
			 if (document.forms[0].Select1.options[menuNum].value == null) return;
			 
 
	if (menuNum == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 
	} 
 
	if (menuNum == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 
	} 
 
  tot = NewOpt.length;
	lst = document.forms[0].Select2.options.length;
	for (i = lst; i > 0; i--) {
	  document.forms[0].Select2.options[i] = null;
	}
  for (i = 0; i < tot; i++) {
	  document.forms[0].Select2.options[i] = NewOpt[i];
	}
  
	  document.forms[0].Select2.options[0].selected = true;
	
	forms0ChangeMenu2(0);
}
 
		function forms0ChangeMenu2() {
		   OneA.length = 0;
			 menuNum = Trak;
		   //menuNum = document.forms[0].Select1.selectedIndex;
		   menuNum2 = document.forms[0].Select2.selectedIndex;
		   if (menuNum == -1) return;  
		   if (menuNum2 == null) return;  
			 
			 if (document.forms[0].Select2.options[menuNum2].value == '') return;
 
if (menuNum == 0) {
 
 
	if (menuNum2 == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Sabbath's Theater");
			NewOpt[0].value = '10';
			
		
		  NewOpt[1] = new Option("The Dead Father");
			NewOpt[1].value = '9';
			
		
		  NewOpt[2] = new Option("The Armies Of The Night");
			NewOpt[2].value = '8';
			
		
	} 
 
	if (menuNum2 == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Life, the Universe and Everything");
			NewOpt[0].value = '4';
			
		
		  NewOpt[1] = new Option("The Restaurant at the End of the Universe");
			NewOpt[1].value = '3';
			
		
		  NewOpt[2] = new Option("The Hitchhiker's Guide to the Galaxy");
			NewOpt[2].value = '2';
			
		
	} 
 
	if (menuNum2 == 2) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("The Cold Fusion Web Database Construction Kit");
			NewOpt[0].value = '5';
			
		
		  NewOpt[1] = new Option("Using ASP For Unknown Reasons");
			NewOpt[1].value = '7';
			
		
	} 
	
}	
 
if (menuNum == 1) {
 
 
	if (menuNum2 == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Tabloid Dreams");
			NewOpt[0].value = '11';
			
		
		  NewOpt[1] = new Option("Moby Dick");
			NewOpt[1].value = '1';
			
		
	} 
 
	if (menuNum2 == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Life, the Universe and Everything");
			NewOpt[0].value = '4';
			
		
	} 
 
	if (menuNum2 == 2) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Special Edition Using Windows NT Server 4");
			NewOpt[0].value = '6';
			
		
		  NewOpt[1] = new Option("The Cold Fusion Web Database Construction Kit");
			NewOpt[1].value = '5';
			
		
	} 
	
}	
 
  tot = NewOpt.length;
	lst = document.forms[0].Select3.options.length;
	
	for (i = lst; i > 0; i--) {
	  document.forms[0].Select3.options[i] = null;
	}
  for (i = 0; i < tot; i++) {
	  document.forms[0].Select3.options[i] = NewOpt[i];
	}
  
}
</SCRIPT>
<SELECT NAME="Select1" onChange="forms0ChangeMenu(this.selectedIndex)" SIZE="3" STYLE="width:150"><OPTION VALUE="1"  SELECTED>ABC Company<OPTION VALUE="2"  >DEF Company<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT><SELECT NAME="Select2" SIZE="3" onChange="forms0ChangeMenu2(this.selectedIndex)" STYLE="width:150"><OPTION VALUE="1" >Literature<OPTION VALUE="2" >Humor<OPTION VALUE="3" >Computers<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT><BR><SELECT NAME="Select3" SIZE="5" MULTIPLE STYLE="width:300"><OPTION VALUE="10" >Sabbath's Theater<OPTION VALUE="9" >The Dead Father<OPTION VALUE="8" >The Armies Of The Night<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</SELECT>
 
 <BR><INPUT TYPE="Submit">
 
</FORM>
 
 
 
 
<P><B>Example 2</B>
<XMP><FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()" NAME="FormX">
 
<CF_ThreeSelectsRelated
  QUERY="GetData"
	TYPE1="Radio"
	HTMLAFTEREACHRADIO1="<BR>"
	HTMLAFTER1=""
	HTMLAFTER2="<BR>"
	NAME1="Sel1"
	NAME2="Sel2"
	NAME3="Sel3"
	DEFAULT1="1"
	DISPLAY1="Company"
	DISPLAY2="Category"
	DISPLAY3="Title"
	VALUE1="CustomerID"
	VALUE2="ID"
	VALUE3="BookID"
	SIZE2="1"
	SIZE3="1"
	EXTRAOPTIONS2="1"
	EXTRAOPTIONS3="5"
	WIDTH2="250"
	WIDTH3="250"
	FORCEWIDTH2="80"
	FORCEWIDTH3="80"
	AUTOSELECTFIRST="Yes"
	FORM="FormX"
	ONCHANGE="Submit!">
 
</FORM>
</XMP>
 
 
 
<FORM ACTION="TestThreeSelectsRelatedGo.cfm" METHOD="POST" onSubmit="return require_Sel1AndSel2AndSel3()" NAME="FormX">
 
 
 
	<SCRIPT LANGUAGE="JavaScript1.1">
	  // javascript code generated by the CF_TwoSelectsRelated Cold Fusion tag (Nate Weiss, 4/98)
		// portions adapted from Nick Heinle's code at http://webreference.com/javascript/960902/select_boxes.html
	  var maxlength = 10;
	  OneA = new Array;
 
		var trueLength = OneA.length;  
		var lst = OneA.length;
    var Trak = 0;
 
    function require_Sel1() {
		  with (document.FormX.Sel1) {
			  RetVal = true;
			  if (Trak == -1) RetVal = false; 
				  
				  else { if (document.FormX.Sel1[Trak].value == '') RetVal = false; else RetVal = true;}
					
			  if (!RetVal) alert('You must choose an option for Sel1.');
				return RetVal;
			}
		}
 
    function require_Sel2() {
		  with (document.FormX.Sel2) {
			  RetVal = true;
			  if (selectedIndex == -1) RetVal = false;
				  else RetVal = !(options[selectedIndex].value == '');
			  if (!RetVal) alert('You must choose an option for Sel2.');
        return eval(RetVal);
				return RetVal;
			}
		}
		
    function require_Sel3() {
		  with (document.FormX.Sel3) {
			  RetVal = true;
			  if (selectedIndex == -1) RetVal = false;
				  else RetVal = !(options[selectedIndex].value == '');
			  if (!RetVal) alert('You must choose an option for Sel3.');
				return RetVal
			}
		}
		
		function require_Sel1AndSel2() {
		  return ((require_Sel1()) && (require_Sel2()));
		}
 
		function require_Sel2AndSel3() {
		  return ((require_Sel2()) && (require_Sel3()));
		}
		
		function require_Sel1AndSel2AndSel3() {
		  return ((require_Sel1AndSel2()) && (require_Sel3()));
		}
				
		function FormXChangeMenu(menuNum) {
		   OneA.length = 0;
		   if (menuNum == null) return;  
			 Trak = menuNum;
			 
			 
 
	if (menuNum == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 
	} 
 
	if (menuNum == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		NewOpt[0] = new Option("Literature");	NewOpt[0].value = '1'; NewOpt[1] = new Option("Humor");	NewOpt[1].value = '2'; NewOpt[2] = new Option("Computers");	NewOpt[2].value = '3'; 
	} 
 
  tot = NewOpt.length;
	lst = document.FormX.Sel2.options.length;
	for (i = lst; i > 0; i--) {
	  document.FormX.Sel2.options[i] = null;
	}
  for (i = 0; i < tot; i++) {
	  document.FormX.Sel2.options[i] = NewOpt[i];
	}
  
	  document.FormX.Sel2.options[0].selected = true;
	
	FormXChangeMenu2(0);
}
 
		function FormXChangeMenu2() {
		   OneA.length = 0;
			 menuNum = Trak;
		   //menuNum = document.FormX.Sel1.selectedIndex;
		   menuNum2 = document.FormX.Sel2.selectedIndex;
		   if (menuNum == -1) return;  
		   if (menuNum2 == null) return;  
			 
			 if (document.FormX.Sel2.options[menuNum2].value == '') return;
 
if (menuNum == 0) {
 
 
	if (menuNum2 == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Sabbath's Theater");
			NewOpt[0].value = '10';
			
		
		  NewOpt[1] = new Option("The Dead Father");
			NewOpt[1].value = '9';
			
		
		  NewOpt[2] = new Option("The Armies Of The Night");
			NewOpt[2].value = '8';
			
		
	} 
 
	if (menuNum2 == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Life, the Universe and Everything");
			NewOpt[0].value = '4';
			
		
		  NewOpt[1] = new Option("The Restaurant at the End of the Universe");
			NewOpt[1].value = '3';
			
		
		  NewOpt[2] = new Option("The Hitchhiker's Guide to the Galaxy");
			NewOpt[2].value = '2';
			
		
	} 
 
	if (menuNum2 == 2) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("The Cold Fusion Web Database Construction Kit");
			NewOpt[0].value = '5';
			
		
		  NewOpt[1] = new Option("Using ASP For Unknown Reasons");
			NewOpt[1].value = '7';
			
		
	} 
	
}	
 
if (menuNum == 1) {
 
 
	if (menuNum2 == 0) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Tabloid Dreams");
			NewOpt[0].value = '11';
			
		
		  NewOpt[1] = new Option("Moby Dick");
			NewOpt[1].value = '1';
			
		
	} 
 
	if (menuNum2 == 1) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Life, the Universe and Everything");
			NewOpt[0].value = '4';
			
		
	} 
 
	if (menuNum2 == 2) {
	  NewOpt = new Array;
		NewVal = new Array;
    
    
		
		  NewOpt[0] = new Option("Special Edition Using Windows NT Server 4");
			NewOpt[0].value = '6';
			
		
		  NewOpt[1] = new Option("The Cold Fusion Web Database Construction Kit");
			NewOpt[1].value = '5';
			
		
	} 
	
}	
 
  tot = NewOpt.length;
	lst = document.FormX.Sel3.options.length;
	
	for (i = lst; i > 0; i--) {
	  document.FormX.Sel3.options[i] = null;
	}
  for (i = 0; i < tot; i++) {
	  document.FormX.Sel3.options[i] = NewOpt[i];
	}
  
	  document.FormX.Sel3.options[0].selected = true;
	
}
</SCRIPT>
<INPUT TYPE="Radio" NAME="Sel1" VALUE="1" CHECKED onClick="FormXChangeMenu(0)">ABC Company<BR><INPUT TYPE="Radio" NAME="Sel1" VALUE="2"  onClick="FormXChangeMenu(1)">DEF Company<BR><SELECT NAME="Sel2" SIZE="1" onChange="FormXChangeMenu2(this.selectedIndex)" STYLE="width:250"><OPTION VALUE="1" >Literature<OPTION VALUE="2" >Humor<OPTION VALUE="3" >Computers<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE=""></SELECT><BR><SELECT NAME="Sel3" SIZE="1" STYLE="width:250" OnChange="this.form.submit();"><OPTION VALUE="10" >Sabbath's Theater<OPTION VALUE="9" >The Dead Father<OPTION VALUE="8" >The Armies Of The Night<OPTION VALUE="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""><OPTION VALUE=""></SELECT>
 
 
</FORM>

Open in new window

Jon Bredensteiner

ASKER

I had found an older version of this, but this one looks like it will work for me much better; now all I have to do is figure out how to use it correctly.

Thank you for the very detailed help! Yesterday I Googled until I couldn't Google anymore, and I never came across this solution ;) I'm sure I'll be writing back very soon :)

Jon Bredensteiner

ASKER

Okay, I used the second half of your post to modify the below code, which I actually extracted from the CF_TwoSelectsRelated.html guide. I am using the TwoSelectsRelated.cfm file as it is posted on Nate Weiss' website.

My issue now is that I need to replace the array with this query somehow:


<CFQUERY NAME="getProgramsVolumes" DATASOURCE="#Application.DSN#">
      SELECT tblVolumeList.Volume AS Volume, tblPilotProgramList.Program AS Program
      FROM tblPilotProgramList INNER JOIN tblVolumeList on tblPilotProgramList.Program = tblVolumeList.Program
      ORDER BY Program
</CFQUERY>

Can someone help me finish this page please? Thanks, Jon

Jon Bredensteiner

ASKER

Sorry, I forgot to attach the code...

I actually thought the below code was connecting to the TwoSelectsRelated.cfm file somehow, bur I cannot figure out how it is connecting (I don't think it is connected). Anyways, I'm obviously a noob...

<P><B>Example 2</B>
 
<FORM ACTION="TwoRelatedSelects.cfm" METHOD="Get" onSubmit="return require_SelectOption2();" NAME="OptionsSelectionForm">
 
	<SELECT NAME="SelectOption1" onChange="OptionsSelectionFormChangeMenu()" SIZE="1" >
		<OPTION VALUE="" SELECTED>(Select Option 1)
		<OPTION VALUE="GEN">General Merchandise
		<OPTION VALUE="APP">Apparel/Accessories
		<OPTION VALUE="ELE">Consumer Electronics
		<OPTION VALUE="AUT">Automotive
		<OPTION VALUE="JEW">Jewelry
		<OPTION VALUE="FOO">Food &amp; Beverage
		<OPTION VALUE="BUS">Business Services
		<OPTION VALUE="CMO">Commodities</OPTION></SELECT><BR>
 
	<SELECT NAME="SelectOption2" SIZE="1">
		<OPTION VALUE="" SELECTED>(Select Option 2)</SELECT><BR>
	
	<INPUT TYPE="SUBMIT" VALUE="Submit Your Search">
 
</FORM>
 
        <SCRIPT LANGUAGE="JavaScript1.1">
 
          var maxlength = 10;
          OneA = new Array;
 
                var trueLength = OneA.length;  
                var lst = OneA.length;              
 
           <!--- Function: require_SelectOption1() --->
		      function require_SelectOption1() {
                  with (document.OptionsSelectionForm.SelectOption1) {
                          RetVal = true;
                          if (options[selectedIndex] == null) RetVal = false;
                                  else RetVal = !(options[selectedIndex].value == '');
                          if (!RetVal) alert('You must choose an option for SelectOption1.');
                                return RetVal}}
 
           <!--- Function: require_SelectOption2() --->
		      function require_SelectOption2() {
                  with (document.OptionsSelectionForm.SelectOption2) {
                          RetVal = true;
                          if (options[selectedIndex] == null) RetVal = false;
                                  else RetVal = !(options[selectedIndex].value == '');
                          if (!RetVal) alert('You must choose an option for SelectOption2.');
                                return RetVal}}
 
           <!--- Function: require_SelectOption1AndSelectOption2() --->
                function require_SelectOption1AndSelectOption2() {
                  return ((require_SelectOption1()) && (require_SelectOption2()));}
                
           <!--- Function: OptionsSelectionFormChangeMenu() --->
                function OptionsSelectionFormChangeMenu() {
                   OneA.length = 0;
                   menuNum = document.OptionsSelectionForm.SelectOption1.selectedIndex;
                   if (menuNum == null) return;  
       
 
			        if (menuNum == 1) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All General Mdse.");    NewOpt[1].value = 'GENALL'; NewOpt[2] = new Option("Arts & Crafts");    NewOpt[2].value = 'GENARS'; NewOpt[3] = new Option("Books & Publications");     NewOpt[3].value = 'GENBOO'; NewOpt[4] = new Option("For Dollar Stores");        NewOpt[4].value = 'GENDOL'; NewOpt[5] = new Option("Giftware"); NewOpt[5].value = 'GENGIF'; NewOpt[6] = new Option("GM Closeouts/Surplus");     NewOpt[6].value = 'GEN-CL'; NewOpt[7] = new Option("Hardware"); NewOpt[7].value = 'GENHAR'; NewOpt[8] = new Option("Health & Beauty Aids");     NewOpt[8].value = 'GENHBA'; NewOpt[9] = new Option("Home Fashion");     NewOpt[9].value = 'GENHOM'; NewOpt[10] = new Option("Housewares");      NewOpt[10].value = 'GENKIT'; NewOpt[11] = new Option("Novelties");      NewOpt[11].value = 'GENNOV'; NewOpt[12] = new Option("Seasonal/Holiday");       NewOpt[12].value = 'GENHOL'; NewOpt[13] = new Option("Sporting Goods"); NewOpt[13].value = 'GENSPO'; NewOpt[14] = new Option("Toys/Games");     NewOpt[14].value = 'GENTOY'; NewOpt[15] = new Option("Adult Merchandise");      NewOpt[15].value = 'GENALT'; NewOpt[16] = new Option("Other");  NewOpt[16].value = 'GENOTH';} 
 
			        if (menuNum == 2) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)"); NewOpt[0].value = ''; NewOpt[1] = new Option("All Apparel/Access.");  NewOpt[1].value = 'APPALL'; NewOpt[2] = new Option("Apparel Closeouts");        NewOpt[2].value = 'APP-CL'; NewOpt[3] = new Option("Boys Accessories"); NewOpt[3].value = 'APPBAC'; NewOpt[4] = new Option("Boys Apparel");     NewOpt[4].value = 'APPBOY'; NewOpt[5] = new Option("Fabric/Textiles");  NewOpt[5].value = 'APPFAB'; NewOpt[6] = new Option("Girls Accessories");        NewOpt[6].value = 'APPGAC'; NewOpt[7] = new Option("Girls Apparel");    NewOpt[7].value = 'APPGIR'; NewOpt[8] = new Option("Infant Accessories");       NewOpt[8].value = 'APPIAC'; NewOpt[9] = new Option("Infant Apparel");   NewOpt[9].value = 'APPINF'; NewOpt[10] = new Option("Mens Accessories");        NewOpt[10].value = 'APPMAC'; NewOpt[11] = new Option("Mens Apparel");   NewOpt[11].value = 'APPMEN'; NewOpt[12] = new Option("Uniforms/Workclothes");   NewOpt[12].value = 'APPUNI'; NewOpt[13] = new Option("Womens Accessories");     NewOpt[13].value = 'APPWAC'; NewOpt[14] = new Option("Womens Apparel"); NewOpt[14].value = 'APPWOM';} 
 
			        if (menuNum == 3) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Electronics");      NewOpt[1].value = 'ELEALL'; NewOpt[2] = new Option("Appliances");       NewOpt[2].value = 'ELEAPP'; NewOpt[3] = new Option("Audio");    NewOpt[3].value = 'ELEAUD'; NewOpt[4] = new Option("Automotive");       NewOpt[4].value = 'ELEAUT'; NewOpt[5] = new Option("Communications");   NewOpt[5].value = 'ELECOM'; NewOpt[6] = new Option("Computer Software");        NewOpt[6].value = 'ELECPS'; NewOpt[7] = new Option("Computers");        NewOpt[7].value = 'ELECPU'; NewOpt[8] = new Option("Electronic Closeouts");     NewOpt[8].value = 'ELE-CL'; NewOpt[9] = new Option("Electronics");      NewOpt[9].value = 'ELEELE'; NewOpt[10] = new Option("Entertainment");   NewOpt[10].value = 'ELEENT'; NewOpt[11] = new Option("Photographic");   NewOpt[11].value = 'ELECAM'; NewOpt[12] = new Option("Small/Home Office");      NewOpt[12].value = 'ELEOFF'; NewOpt[13] = new Option("Telephone");      NewOpt[13].value = 'ELETEL'; NewOpt[14] = new Option("Video");  NewOpt[14].value = 'ELEVID';} 
 
			        if (menuNum == 4) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Automotive");       NewOpt[1].value = 'AUTALL'; NewOpt[2] = new Option("Accessories");      NewOpt[2].value = 'AUTACC'; NewOpt[3] = new Option("Add-Ons");  NewOpt[3].value = 'AUTADD'; NewOpt[4] = new Option("Batteries");        NewOpt[4].value = 'AUTBAT'; NewOpt[5] = new Option("Buy Backs/Over Stock");     NewOpt[5].value = 'AUT-CL'; NewOpt[6] = new Option("Chemicals");        NewOpt[6].value = 'AUTCHE'; NewOpt[7] = new Option("Electronics");      NewOpt[7].value = 'AUTELE'; NewOpt[8] = new Option("Lubicants");        NewOpt[8].value = 'AUTLUB'; NewOpt[9] = new Option("Marine");   NewOpt[9].value = 'AUTMAR'; NewOpt[10] = new Option("Motorcycles");     NewOpt[10].value = 'AUTMOT'; NewOpt[11] = new Option("Recreational Vehicle");   NewOpt[11].value = 'AUTREC'; NewOpt[12] = new Option("Replacement Parts");      NewOpt[12].value = 'AUTREP'; NewOpt[13] = new Option("Shop Equipment"); NewOpt[13].value = 'AUTSHO'; NewOpt[14] = new Option("Sound");  NewOpt[14].value = 'AUTAUD'; NewOpt[15] = new Option("Tires");  NewOpt[15].value = 'AUTTIR'; NewOpt[16] = new Option("Tools");  NewOpt[16].value = 'AUTTOO'; NewOpt[17] = new Option("Trucks"); NewOpt[17].value = 'AUTTRU';} 
 
			        if (menuNum == 5) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Jewelry");  NewOpt[1].value = 'JEWALL'; NewOpt[2] = new Option("Costume Jewelry");  NewOpt[2].value = 'JEWCOS'; NewOpt[3] = new Option("Fine Jewelry");     NewOpt[3].value = 'JEWFIN'; NewOpt[4] = new Option("Gemstones & Minerals");     NewOpt[4].value = 'JEWGEM'; NewOpt[5] = new Option("Specialty / Custom");       NewOpt[5].value = 'JEWCUS';} 
 
			        if (menuNum == 6) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Foods");    NewOpt[1].value = 'FOOALL'; NewOpt[2] = new Option("Alcoholic Beverages");      NewOpt[2].value = 'FOOALC'; NewOpt[3] = new Option("Food Surplus");     NewOpt[3].value = 'FOO-CL'; NewOpt[4] = new Option("Health & Nutrition");       NewOpt[4].value = 'FOOHEA'; NewOpt[5] = new Option("Non-Alcoholic Bev.");       NewOpt[5].value = 'FOOBEV'; NewOpt[6] = new Option("Packaged Foods");   NewOpt[6].value = 'FOOPAC'; NewOpt[7] = new Option("Perishables");      NewOpt[7].value = 'FOOPER'; NewOpt[8] = new Option("Unpackaged Foods"); NewOpt[8].value = 'FOOUNP';} 
 
			        if (menuNum == 7) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Business Svcs.");   NewOpt[1].value = 'BUSALL'; NewOpt[2] = new Option("Advertising Services");     NewOpt[2].value = 'BUSADV'; NewOpt[3] = new Option("Architectural Svcs.");      NewOpt[3].value = 'BUSARC'; NewOpt[4] = new Option("Business Opportunity");     NewOpt[4].value = 'BUSOPP'; NewOpt[5] = new Option("Copy Services");    NewOpt[5].value = 'BUSCOP'; NewOpt[6] = new Option("Employment Services");      NewOpt[6].value = 'BUSEMP'; NewOpt[7] = new Option("Entertainment Svcs.");      NewOpt[7].value = 'BUSENT'; NewOpt[8] = new Option("Financial Services");       NewOpt[8].value = 'BUSFIN'; NewOpt[9] = new Option("Legal Services");   NewOpt[9].value = 'BUSLEG'; NewOpt[10] = new Option("Premiums");        NewOpt[10].value = 'BUSPRE'; NewOpt[11] = new Option("Promotional Services");   NewOpt[11].value = 'BUSPRO'; NewOpt[12] = new Option("Real Estate Services");   NewOpt[12].value = 'BUSREA';}
 
			        if (menuNum == 8) {
			          NewOpt = new Array;
			                NewVal = new Array;
			    
			    NewOpt[0] = new Option("(Select Option 2)");       NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = '';   NewOpt[0] = new Option("(Select Option 2)");   NewOpt[0].value = ''; NewOpt[1] = new Option("All Commodities");      NewOpt[1].value = 'CMOALL'; NewOpt[2] = new Option("Exchange/Currency");        NewOpt[2].value = 'CMOCUR'; NewOpt[3] = new Option("Ores/Minerals/Metals");     NewOpt[3].value = 'CMOORE'; NewOpt[4] = new Option("Precious Metals");  NewOpt[4].value = 'CMOPRE'; NewOpt[5] = new Option("Tobacco");  NewOpt[5].value = 'CMOTOB';}
 
			  tot = NewOpt.length;
			        lst = document.OptionsSelectionForm.SelectOption2.options.length;
			        
			        for (i = lst; i > 0; i--) {
			          document.OptionsSelectionForm.SelectOption2.options[i] = null;}
					
				   for (i = 0; i < tot; i++) {
			          document.OptionsSelectionForm.SelectOption2.options[i] = NewOpt[i];}
			  
			          document.OptionsSelectionForm.SelectOption2.options[0].SelectOption2 = true;
			}
           <!--- End Function: OptionsSelectionFormChangeMenu() --->
        </SCRIPT>

Open in new window

ASKER CERTIFIED SOLUTION

galadore

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jon Bredensteiner

ASKER

Man, I should have stayed at work a little longer on Saturday night / Sunday morning; I worked from noon on Saturday until 5:30am Sunday morning trying to figure this all out... Anyways, yes I thought I was going to need to do three selects, but I got it down to two selects.

Okay, now I see what I was doing wrong with the two selects. I was trying to modify the html file that is included in the twoselectsrelated group of files, but I should have only been monkeying around with the TwoSelectsRelated_Test_CF40_And_Up.cfm file.

Well that is fairly straightforward. I'll try it out with my data right now.

p.s. I would like to move the TwoSelectsRelated.cfm and the CF_TwoSelectsRelated.html file into a sub folder named "DynamicSelects", but it doesn't work when I move them. I've tried changing the code in "" to the below, but no love...

DynamicSelects/CF_TwoSelectsRelated
DynamicSelects/CF_TwoSelectsRelated.html
"DynamicSelects/CF_TwoSelectsRelated.html"

None of the above work to call the custom tag

Thanks again, Jon

<!--- Create a query to feed to the custom tag... --->
<!--- Normally, this would probably be a CFQUERY --->
<CFSCRIPT>
  q = QueryNew("Val1,Val2,Disp1,Disp2");
  QueryAddRow(q, 12);
 
  q["Val1"][1] = "1";   q["Disp1"][1] = "Times";     q["Val2"][1] = "1";   q["Disp2"][1] = "Noon";
  q["Val1"][2] = "1";   q["Disp1"][2] = "Times";     q["Val2"][2] = "2";   q["Disp2"][2] = "Midnight";
  q["Val1"][3] = "1";   q["Disp1"][3] = "Times";     q["Val2"][3] = "3";   q["Disp2"][3] = "Dawn";
  q["Val1"][4] = "2";   q["Disp1"][4] = "People";    q["Val2"][4] = "10";  q["Disp2"][4] = """Mira"" Sorvino";
  q["Val1"][5] = "2";   q["Disp1"][5] = "People";    q["Val2"][5] = "11";  q["Disp2"][5] = "Stephanie Hawkins' Fox";
  q["Val1"][6] = "2";   q["Disp1"][6] = "People";    q["Val2"][6] = "12";  q["Disp2"][6] = "Brad Pitt";
  q["Val1"][7] = "2";   q["Disp1"][7] = "People";    q["Val2"][7] = "13";  q["Disp2"][7] = "Amanda Jones";
  q["Val1"][8] = "3";   q["Disp1"][8] = "Animals";   q["Val2"][8] = "31";  q["Disp2"][8] = "Elephant";
  q["Val1"][9] = "3";   q["Disp1"][9] = "Animals";   q["Val2"][9] = "32";  q["Disp2"][9] = "Kitty Cat";
  q["Val1"][10] = "3";  q["Disp1"][10] = "Animals";  q["Val2"][10] = "33"; q["Disp2"][10] = "Giraffe";
  q["Val1"][11] = "3";  q["Disp1"][11] = "Animals";  q["Val2"][11] = "34"; q["Disp2"][11] = "New York City Rat";
  q["Val1"][12] = "3";  q["Disp1"][12] = "Animals";  q["Val2"][12] = "35"; q["Disp2"][12] = "Kangaroo";
</CFSCRIPT>
 
 
<FORM>
  <DynamicSelects/CF_TwoSelectsRelated.cfm
    Name1="BigCat"
    Name2="SubCat"
    Query="q"
    Value1="Val1"
    Value2="Val2"
    Display1="Disp1"
    Display2="Disp2"
    Default1="2"
    Default2="11"
    ForceWidth2="20"
    ExtraOptions2="5">
  
</FORM>

Open in new window

Jon Bredensteiner

ASKER

Okay, I got it working with my Query (1st code below); however, I cannot figure out how to devide up the two cells into my original form (2nd code below). I tried inserting the code into my form, but it always errors.

I'm not sure if this is a seperat question, but I can submit another question if requested. Thanks, Jon

<!--- This code works great --->
<CFQUERY NAME="getVolumes" DATASOURCE="EvtSpatial">
	SELECT tblVolumeList.Volume AS Volume, tblVolumeList.Program AS VProgram, tblPilotProgramList.Program AS Program
	FROM tblPilotProgramList LEFT JOIN tblVolumeList on tblPilotProgramList.Program = tblVolumeList.Program
	ORDER BY Program
</CFQUERY>
 
<FORM ACTION="" METHOD="GET">
	<CF_TwoSelectsRelated
	    Name1="Program"
	    Name2="Volume"
	    Query="getVolumes"
	    Value1="Program"
	    Value2="Volume"
	    Display1="Program"
	    Display2="Volume"
	    EMPTYTEXT1="Choose a Program"
	    EMPTYTEXT2="Choose a Volume">
	<INPUT TYPE="SUBMIT">
</FORM>
 
 
 
 
 
<!--- I need to change the below "Program" and the "Volume" Input cells to use the above custom tagecode--->
 
<CFFORM METHOD="Get" NAME="ActionForm">
<TABLE BORDER="1" WIDTH="*" cellpadding=5 cellspacing=0 BORDERCOLOR="black" CLASS="left">
	<TR>
	<TH nowrap="nowrap" VALIGN="middle" ALIGN="center"class="required" colspan=3>MEETING INFORMATION </TH>
	</TR>
 
	<TR>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Program</TD>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Volume</TD>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow" colspan=1>Meeting Date</TD>
	</TR>
 
	<TR>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="normal" >
		<SELECT NAME="SelectProgram" ID="SelectProgram" TABINDEX="1">
			<OPTION>Program Selection</OPTION>
			<CFOUTPUT QUERY="getProgramVolume">
			<OPTION VALUE="#Program#">#Program#</OPTION>
			</CFOUTPUT>	
		</SELECT>
	</TD>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="normal" >
		<SELECT NAME="SelectVolume" ID="SelectVolume" TABINDEX="2">
			<OPTION>Volume Selection</OPTION>
			<CFOUTPUT QUERY="getProgramVolume">
			<OPTION VALUE="#Volume#">#Volume#</OPTION>
			</CFOUTPUT>	
		</SELECT>
	</TD>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="normal">
		<INPUT TABINDEX="3" TYPE="text" NAME="SelectDate" ID="SelectDate" SIZE="15" onFocus="getCalendarFor(this); this.blur()" CLASS="textfield">
	</TD>
	</TR>
	
	<TR>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Action</TD>
	<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="left" CLASS="normal" COLSPAN="2">
		<SELECT NAME="SelectAction" ID="SelectAction" TABINDEX="4">
			<OPTION>Attendance Tracking Options List</OPTION>
			<CFOUTPUT QUERY="getActions">
			<OPTION VALUE="#AttFormActionURL#">#AttFormAction#</OPTION>
			</CFOUTPUT>	
		</SELECT>
	</TD>
	</TR>
	
	<TR>
	<TH CLASS="required" colspan=3>
		<INPUT TYPE="submit" NAME="Continue" VALUE="Continue &gt;&gt;&gt;" onClick="checkForm(this.form);">
	</TH>
	</TR>
</TABLE>
</CFFORM>

Open in new window

Jon Bredensteiner

ASKER

Okay, I finally figured it out... Here is my solution in case anyone else ever comes looking for it, but don't forget to download the two (TwoSelectsRelated) files from: http://www.geocities.com/thanny/#Code

<!-------------------------------------------------- JavaScript -------------------------------------------------->
	<!-- JavaScript: Create calendar buttons -->
	<script language="JavaScript">
		function ShowCalendar(FormName, FieldName)
			{window.open("DatePopup.cfm?FormName=" + FormName + "&FieldName=" + FieldName, "CalendarWindow", "width=250,height=250");}
	</script>
 
	<!-- JavaScript: Error Checking - Check Form Fields for Values -->
	<script type="text/javascript">
	var checkForm = function(objForm){
	 if (objForm.SelectProgram.value=="" || objForm.SelectProgram.value=="Program Selection") {
	  alert("Please select the Program.");
	  return false;
	 } else if (objForm.SelectVolume.value=="" || objForm.SelectVolume.value=="Volume Selection") {
	  alert("Please select the Volume.");
	  return false;
	 } else if (objForm.SelectDate.value=="") {
	  alert("Please select a Meeting Date.");
	  return false;
	 } else if (objForm.SelectAction.value=="" || objForm.SelectAction.value=="Attendance Tracking Options List") {
	  alert("Please select an Action.");
	  return false;
	 } else {
	  document.ActionForm.action = objForm.SelectAction.value;
	 }
	};
	</script>
	
	<!-- JavaScript: Dynamically Select the ActionForm's New ActionURL -->
	<script type="text/javascript">
		function OnSubmitActionForm(NewActionURL)
		{
			document.ActionForm.action = NewActionURL.value;
		}
		// Put the following code in the submit button's code: onClick="OnSubmitActionForm(this.form.SelectAction);"
	</script>
 
		<!-- Call PopupDate JavaScript -->
		<SCRIPT LANGUAGE="JavaScript" SRC="_scripts/PopupDate.js"></SCRIPT>
 
		<!-- ? -->	
		<SCRIPT LANGUAGE="javascript1.2" SRC="_scripts/javascript.js" TYPE="text/javascript"></SCRIPT>
 
<!-------------------- End JavaScript -------------------->
 
 
<!-------------------------------------------------- Data Queries -------------------------------------------------->
<!-- Query: Get Volumes by Program -->
<CFQUERY NAME="getProgramVolume" DATASOURCE="EvtSpatial">
	SELECT tblPilotProgramList.Program AS Program, tblVolumeList.Volume AS Volume, tblVolumeList.Program AS VProgram
	FROM tblPilotProgramList LEFT JOIN tblVolumeList on tblPilotProgramList.Program = tblVolumeList.Program
	ORDER BY Program
</CFQUERY>
 
 
<!-- Query: Get Action Options -->
<CFQUERY NAME="getActions" DATASOURCE="EvtSpatial">
	SELECT AttFormActionID, AttFormAction, AttFormActionURL
	FROM tblListAttFormAction
	ORDER BY AttFormAction
</CFQUERY>
<!-------------------- End Data Queries -------------------->
 
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Untitled Document</TITLE>
</HEAD>
 
 
<BODY>
 
<CFFORM METHOD="Get" NAME="ActionForm">
	<TABLE BORDER="1" WIDTH="*" cellpadding=5 cellspacing=0 BORDERCOLOR="black" CLASS="left">
		<TR>
		<TH nowrap="nowrap" VALIGN="middle" ALIGN="center"class="required" colspan=3>MEETING INFORMATION </TH>
		</TR>
 
		<TR>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Program</TD>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Volume</TD>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow" colspan=1>Meeting Date</TD>
		</TR>
 
		<TR>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="normal" colspan="1" >
			<CF_TwoSelectsRelated
			    Name1="SelectProgram"
			    Name2="SelectVolume"
			    Query="getProgramVolume"
			    Value1="Program"
			    Value2="Volume"
			    Display1="Program"
			    Display2="Volume"
			    EMPTYTEXT1="Choose a Program"
			    EMPTYTEXT2="Choose a Volume"
			    FORMNAME="ActionForm"
			    HTMLBETWEEN="</TD><TD>">
		</TD>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="normal">
			<INPUT TABINDEX="3" TYPE="text" NAME="SelectDate" ID="SelectDate" SIZE="15" onFocus="getCalendarFor(this); this.blur()" CLASS="textfield">
		</TD>
		</TR>
		
		<TR>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="center" CLASS="headerrow">Action</TD>
		<TD nowrap="nowrap" WIDTH="*" VALIGN="middle" ALIGN="left" CLASS="normal" COLSPAN="2">
			<SELECT NAME="SelectAction" ID="SelectAction" TABINDEX="4">
				<OPTION>Attendance Tracking Options List</OPTION>
				<CFOUTPUT QUERY="getActions">
				<OPTION VALUE="#AttFormActionURL#">#AttFormAction#</OPTION>
				</CFOUTPUT>	
			</SELECT>
		</TD>
		</TR>
		
		<TR>
		<TH CLASS="required" colspan=3>
			<INPUT TYPE="submit" NAME="Continue" VALUE="Continue &gt;&gt;&gt;" onClick="checkForm(this.form);">
		</TH>
		</TR>
	</TABLE>
</CFFORM>
 
 
<!-------------------------------------------------- JavaScript -------------------------------------------------->
	<!-- Calendar PopupDate JavaScript Formatting and Scripting -->
	<SCRIPT LANGUAGE="JavaScript">
		if (document.all) {
		 document.writeln("<div id=\"PopUpCalendar\" style=\"position:absolute; left:0px; top:0px; z-index:7; width:200px; height:77px; overflow: visible; visibility: hidden; background-color: #FFFFFF; border: 1px none #000000\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout(\'hideCalendar()\',500)\">");
		 document.writeln("<div id=\"monthSelector\" style=\"position:absolute; left:0px; top:0px; z-index:9; width:181px; height:27px; overflow: visible; visibility:inherit\">");}
		else if (document.layers) {
		 document.writeln("<layer id=\"PopUpCalendar\" pagex=\"0\" pagey=\"0\" width=\"200\" height=\"200\" z-index=\"100\" visibility=\"hide\" bgcolor=\"#FFFFFF\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout('hideCalendar()',500)\">");
		 document.writeln("<layer id=\"monthSelector\" left=\"0\" top=\"0\" width=\"181\" height=\"27\" z-index=\"9\" visibility=\"inherit\">");}
		else {
		 document.writeln("<p><font color=\"#FF0000\"><b>Error ! The current browser is either too old or too modern (usind DOM document structure).</b></font></p>");}
	</SCRIPT>
 
	<!-- Checks to See if JavaScript is Enabled -->
	<NOSCRIPT><P><FONT COLOR="#FF0000"><B>JavaScript is not activated !</B></FONT></P></NOSCRIPT>
		<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" WIDTH="200" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#000000" VSPACE="0" HSPACE="0"><FORM NAME="ppcMonthList"><TR><TD ALIGN="center" BGCOLOR="#CCCCCC"><A HREF="javascript:moveMonth('Back')" onMouseOver="window.status=' ';return true;"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#000000"><B>< </B></FONT></A><FONT FACE="MS Sans Serif, sans-serif" SIZE="1"> 
		<SELECT NAME="sItem" ONMOUSEOUT="if(ppcIE){window.event.cancelBubble = true;}" onChange="switchMonth(this.options[this.selectedIndex].value)" STYLE="font-family: 'MS Sans Serif', sans-serif; font-size: 9pt"><OPTION VALUE="0" SELECTED>2000 " January</OPTION><OPTION VALUE="1">2000 " February</OPTION><OPTION VALUE="2">2000 " March</OPTION><OPTION VALUE="3">2000 " April</OPTION><OPTION VALUE="4">2000 " May</OPTION><OPTION VALUE="5">2000 " June</OPTION><OPTION VALUE="6">2000 " July</OPTION><OPTION VALUE="7">2000 " August</OPTION><OPTION VALUE="8">2000 " September</OPTION><OPTION VALUE="9">2000 " October</OPTION><OPTION VALUE="10">2000 " November</OPTION><OPTION VALUE="11">2000 " December</OPTION><OPTION VALUE="0">2001 " January</OPTION></SELECT></FONT><A HREF="javascript:moveMonth('Forward')" onMouseOver="window.status=' ';return true;"><FONT FACE="Arial, Helvetica, sans-serif" SIZE="2" COLOR="#000000"><B> ></B></FONT></A></TD></TR></FORM></TABLE>
		<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="2" BORDERCOLORLIGHT="#000000" BORDERCOLORDARK="#000000" WIDTH="200" VSPACE="0" HSPACE="0"><TR ALIGN="center" BGCOLOR="#CCCCCC"><TD WIDTH="20" BGCOLOR="#FFFFCC"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Su</FONT></B></TD><TD WIDTH="20"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Mo</FONT></B></TD><TD WIDTH="20"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Tu</FONT></B></TD><TD WIDTH="20"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">We</FONT></B></TD><TD WIDTH="20"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Th</FONT></B></TD><TD WIDTH="20"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Fr</FONT></B></TD><TD WIDTH="20" BGCOLOR="#FFFFCC"><B><FONT FACE="MS Sans Serif, sans-serif" SIZE="1">Sa</FONT></B></TD></TR></TABLE>
 
	<SCRIPT LANGUAGE="JavaScript">
		if (document.all) {
		 document.writeln("</div>");
		 document.writeln("<div id=\"monthDays\" style=\"position:absolute; left:0px; top:52px; z-index:8; width:200px; height:17px; overflow: visible; visibility:inherit; background-color: #FFFFFF; border: 1px none #000000\"> </div></div>");}
		else if (document.layers) {
		 document.writeln("</layer>");
		 document.writeln("<layer id=\"monthDays\" left=\"0\" top=\"52\" width=\"200\" height=\"17\" z-index=\"8\" bgcolor=\"#FFFFFF\" visibility=\"inherit\"> </layer></layer>");}
		else {/*NOP*/}
	</SCRIPT>
	<!-- End Calendar PopupDate JavaScript Formatting and Scripting -->
<!-------------------- End JavaScript -------------------->
 
</BODY>
</HTML>

Open in new window

Jon Bredensteiner

ASKER

Thank you for pointing me in the right direction galadore. I posted my final solution. Thanks, Jon