3 select related

[johk02]

Hi,
I am creating a select related with 3 list boxes and have used the tutorial

http://tutorial196.easycfm.com/

. I haven't changed the JavaScript supplied in the tutorial but for some reason I can't get it to work. The problem is that the 1:st box get populated OK but afterwards the 2:nd box doesn't get updated. I presumed it had to be something with the JavaScript. Any help would be much appreciated.

Query used:

 <cfquery name="qryLocationInfo" datasource="#request.SiteDSN#">
    select distinct city, state, address
    from holanet_Location
    group by state, city, address 
     order by state, city, address
</cfquery>

Javascript:

<InvalidTag 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
        <!--- We set a variable for our loop to insert the data. The loop starts at zero because JavaScript arrays start at zero. --->
        <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="qryLocationInfo">
                aryLocation[#Variables.JSLoop#] = new Array("#qryLocationInfo.state#", "#qryLocationInfo.city#", "#qryLocationInfo.address#");
            <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 state select box), the scndSel (the city select box),
                 the thrdSel (the address select box) and thisSel (the select box that
                  actually called for the change to occur).
           */

            //local variables
            var i; var chkCty = "";

            //see if we just changed the first select box (state).
            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 City", "");
                 thrdSel.options[thrdSel.length] = new Option("Choose Address", "");

            //Now loop through and set the second option list (city).
            //If a state was chosen. There is also code to prevent duplicate
            //cities. This could happen if a city had multiple addresses.
                if(thisSel.options[thisSel.selectedIndex].value != "") {
                     for (i = 0; i < aryLocation.length; i++) {
                             if(aryLocation[0] == thisSel.options[thisSel.selectedIndex].value && chkCty.lastIndexOf(aryLocation[1] == -1) { scndSel.options[scndSel.length] = new Option(aryLocation[1], aryLocation[1]); chkCty = chkCty + "," + aryLocation[1];
                             }
                     }
                 }
             }
             //see if we just changed the second select box(city).
                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 Address", "");
                            //set the rest of the values if a city was chosen.
                                for(i=0; i < aryLocation.length; i++) {
                                    if(aryLocation[0] == frstSel.options[frstSel.selectedIndex].value && aryLocation[1] == scndSel.options[scndSel.selectedIndex].value) { thrdSel.options[thrdSel.length] = new Option(aryLocation[2], aryLocation[2])
                                    }
                                 }
         }
    }
//-->
</script>

Output:

<cfoutput>
  <form method="post" name="testForm">
  <table>
   <tr>
    <th>State</th>
    <th>City</th>
    <th>Address</th>
   </tr>
   <cfloop from="1" to="1" index="Variables.myLoop"><cfdump var="myState#myLoop#">
   <tr>
     <td>
     <cfset stateList = "">
    <select name="myState#myLoop#" onChange="tsrUpdSelects(this, testForm.myCity#myLoop#, testForm.myAddr#myLoop#, this);">
       <option value="" selected>Choose State</option>
       <cfloop query="qryLocationInfo">
        <cfif not listFindNoCase(stateList, qryLocationInfo.state, ",")>
        <option value="#qryLocationInfo.state#"> #qryLocationInfo.state# </option>
        <cfset stateList = listAppend(stateList, qryLocationInfo.state, ",")>
        </cfif>
        </cfloop>
     </select>
     </td>
     <td>
     <select name="myCity#myLoop#" onChange="tsrUpdSelects(testForm.myState#myLoop#, this, testForm.myAddr#myLoop#, this);">
      <option value="" selected>Choose City</option>
      </select>
      </td>
      <td>
        <select name="myAddr#myLoop#">
            <option value="" selected>Choose Address</option>
        </select>
      </td>
    </tr>
    </cfloop>
  </table>
  </form>
  </cfoutput>

Regards
Jonas