How to go from checkbox to dropdown list dynamically

[shearak]

I want to use checkboxes so when checked the dropdown menu would get populated dyamically in turn populate another drop down. I can't seem to get this to work. Please help.

Thanks

<!--- Select the states and area codes. --->
<CFQUERY DATASOURCE = &quot;States&quot; NAME = &quot;GetStates&quot;>
SELECT S.State, S.StateCode, AC.AreaCode, AC.Note
FROM States S, AreaCodes AC
WHERE S.StateCode = AC.StateCode
ORDER BY S.State, AC.AreaCode, AC.Note
</CFQUERY>

<!--- Select all the area codes. --->
<CFQUERY DATASOURCE = &quot;States&quot; NAME = &quot;GetCodes&quot;>
SELECT AreaCode, Note
FROM AreaCodes
ORDER BY AreaCode
</CFQUERY>

<SCRIPT LANGUAGE = &quot;JavaScript&quot;>
<!--
// 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 = &quot;GetStates&quot; GROUP = &quot;State&quot;>
// 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(&quot;StateArray&quot; + ThisState + &quot;.length&quot;
// Put 'Select' as the first option in the area code drop-down
document.StateForm.AreaCode[0].value = &quot;&quot;;
document.StateForm.AreaCode[0].text = &quot;Area Code&quot;;
document.StateForm.AreaCode[0].selected = true;
// Loop through the state's array and populate the area code drop down.
for (i=1; i<eval(&quot;StateArray&quot; + ThisState + &quot;.length&quot; i++)
{
document.StateForm.AreaCode.value = eval(&quot;StateArray&quot; + ThisState + &quot;&quot;
document.StateForm.AreaCode.text = eval(&quot;StateArray&quot; + ThisState + &quot;&quot;
}
}
}

function PopulateArea()
{
// 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.Area.length = eval(&quot;StateArray&quot; + ThisState + &quot;.length&quot;
// Put 'Select' as the first option in the area code drop-down
document.StateForm.Area[0].value = &quot;&quot;;
document.StateForm.Area[0].text = &quot;State Description&quot;;
document.StateForm.Area[0].selected = true;
// Loop through the state's array and populate the area code drop down.
for (i=1; i<eval(&quot;StateArray&quot; + ThisState + &quot;.length&quot; i++)
{
document.StateForm.Area.value = eval(&quot;StateArray&quot; + ThisState + &quot;&quot;
document.StateForm.Area.text = eval(&quot;StateArray&quot; + ThisState + &quot;&quot;
}
}
}
//-->
</SCRIPT>

<FORM NAME = &quot;StateForm&quot;>
<TABLE BORDER = &quot;0&quot;>
<TR>
<TD><B>State</B></TD>
<TD><B>Area Code</B></TD>
<TD><B>State Description</B></TD>
</TR>
<TR>
<TD>
<cfoutput query=&quot;GetStates&quot; group=&quot;State&quot; maxrows=5>
<input type=&quot;checkbox&quot; onClick=&quot;PopulateAreaCode()&quot;>
#State#
</CFOUTPUT>
</SELECT>
</TD>
<TD>
<select name=&quot;AreaCode&quot; size=&quot;5&quot; wide=&quot;150&quot; onChange=&quot;PopulateArea()&quot;>
<OPTION VALUE = &quot;0&quot;>Select Area Code
<CFOUTPUT QUERY = &quot;GetCodes&quot;>
<OPTION VALUE = &quot;#AreaCode#&quot;>#AreaCode#
</CFOUTPUT>
</SELECT>
</TD>

<TD>
<select name=&quot;Area&quot; size=&quot;5&quot; wide=&quot;150&quot;>
<OPTION VALUE = &quot;0&quot;>Select State Description
<CFOUTPUT QUERY = &quot;Getstates&quot;>
<OPTION VALUE = &quot;#Note#&quot;>#Note#
</CFOUTPUT>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM