Javascript and CF for 3 level narrow down search, pls help!

[kuolung]

the following is what i have in my code, it works now for 2 levels. Now, i want to 3rd level drill down derived from the 2nd level. To make it clear, here is what i have:
I have a dropdown list #1 populated from the table (A, B, C,...), once i select item A, it will list out all the subgroup belongs to A (1, 2, 3,...). The 3rd level i want to do is select 1 and it will give another sub-subgroup within 1 (a, b, c, ...). Also, 3rd level (a, b, c...) sometimes can be NULL, if NULL i want it listed as N/A (or not applicable), and this is the query for 3rd level

<cfquery name=&quot;divisions&quot; datasource=&quot;#webman_ds#&quot;>
select distinct organizational_group as office, organizational_subgroup as division
from webman_tssms_orgs
order by 1, 2
</cfquery>

So please help me what are all the syntax and code i put to make the 3rd level work and here are what i have:

--------------------------------------------------------------------------------
<cfquery name=&quot;offices&quot; datasource=&quot;#webman_ds#&quot;>
select distinct organization as aaship, organizational_group as office
from webman_tssms_orgs
order by 1, 2
</cfquery>

<cfquery name=&quot;aaships&quot; datasource=&quot;#webman_ds#&quot;>
select distinct organization as aaship
from webman_tssms_orgs
order by 1
</cfquery>

<script LANGUAGE=&quot;JavaScript&quot;>
<!-- Activate cloak

var maxLength = 11;

siteopt = new Array;

siteopt[0] = &quot;&quot;;
<cfset jsarraycount = 1>
<cfset jstempaaship = &quot; &quot;>
<cfoutput query=&quot;aaships&quot;>
<cfif TRIM(jstempaaship) neq TRIM(#aaship#)>
siteopt[#jsarraycount#] = &quot;#aaship#&quot;;
<cfset jsarraycount = jsarraycount +1>
<cfset jstempaaship = #aaship#>
</cfif>
</cfoutput>

var trueLength = siteopt.length;
var lst = siteopt.length;

catopt = new Array;

catopt[0] = &quot;&quot;;

<cfset jsarraycount = 1>
<cfset jstempaaship = &quot;&quot;>
<cfoutput query=&quot;aaships&quot;>
<cfif jstempaaship neq #aaship#>
catopt[#jsarraycount#] = &quot;#aaship#&quot;;
<cfset jsarraycount = jsarraycount +1>
<cfset jstempaaship = #aaship#>
</cfif>
</cfoutput>

function changeMenu()

{
siteopt.length = 0;
menuNum = document.searchchoice.aaorg.selectedIndex;
if (menuNum == null) return;
if (menuNum == 0)
// NOTHING
{
siteopt = new Array;
siteopt[0] = new Option(&quot;N/A&quot;
}

<cfsetting enablecfoutputonly=&quot;Yes&quot;>
<cfset jsaashipcount = 1>
<cfset lastOpt = 1>
<cfset jstempaaship = &quot; &quot;>

<cfoutput query=&quot;offices&quot;>
<!--- test for a new aaship --->
<cfif jstempaaship eq #aaship#>
<!--- same topic as last time through --->
<cfif len(#office#) GT 0>
<cfset lastOpt = lastOpt + 1>
<cfsetting enablecfoutputonly=&quot;no&quot;>
siteopt[#lastOpt#] = new Option (&quot;#office#&quot;,&quot;#Office#&quot;
<cfsetting enablecfoutputonly=&quot;no&quot;>
</cfif>
<cfset jstempaaship = #aaship#>
<cfelse>
<!--- not a new aaship - write the siteopt array for this --->
<cfsetting enablecfoutputonly=&quot;no&quot;>
<cfif jsAashipCount neq 1>
}

</cfif>
if (menuNum == #jsaashipcount#)
// they chose #aaship#
{
siteopt = new Array;
siteopt[0] = new Option(&quot; &quot;, &quot;N/A&quot;
siteopt[1] = new Option (&quot;#office#&quot;,&quot;#office#&quot;
<cfsetting enablecfoutputonly=&quot;yes&quot;>
<cfset lastOpt = 1>
<cfset jsaashipcount = jsaashipcount +1>
<cfset jstempaaship = #aaship#>
</cfif>
</cfoutput>
<cfsetting enablecfoutputonly=&quot;no&quot;>
}

tot = siteopt.length;

for (i = lst; i > 0; i--)
{ document.searchchoice.officegroup.options = null; }

for (i = 0; i < tot; i++)
{ document.searchchoice.officegroup.options = siteopt; }

document.searchchoice.officegroup.options[0].selected = true;

lst = siteopt.length;

} // Deactivate cloak -->


</script>

<form name=&quot;searchchoice&quot;>
<select name=&quot;aaorg&quot; onChange=&quot;changeMenu(this.form)&quot; size=&quot;1&quot;>
<script language=&quot;javascript&quot;> with (document) {
tot = catopt.length;
writeln('<OPTION Disabled Selected>' +catopt[0]);
for (i = 1; i < tot; i++)
writeln('<OPTION Value=&quot;'+catopt+ '&quot;>' +catopt )};</script>
</select>

<select name=&quot;officegroup&quot; size=&quot;1&quot; length=20>
<script language=&quot;javascript&quot;> with (document) {
writeln('<OPTION Disabled Selected>');
for (i = 1; i < maxLength; i++)
writeln('<OPTION Value=&quot;'+siteopt +'&quot;>' +siteopt);
writeln(&quot;</SELECT>&quot;
for (i = maxLength; i > trueLength; i--)
{ SelectMenu.violation.options = null; }
changeMenu();};</script>
</form>

--------------------------------------------------------------------------------
thanks.

 

[RichardBro]

Sakura

Instead of trying to write this yourself, I suggest that you try either 'ThreeSelectsRelated' or 'ActiveSelect'. Both these tags work well, the latter being able to handle more than three related select boxes.

They both use a structured query as a datasource so the page need not be refreshed to get the right data into a subsequent select.

Richard

 

[kuolung]

richard,

thanks for replying. however, I'm just a beginner in CF and know a little of Javascript, so can you please give me an example how to use &quot;ThreeSelectsRelated' or &quot;ActiveSelect&quot; in CF ?? I appreciate alot and thanks in advance.

 

[RichardBro]

Both tags come with full instructions attached.

Basically you design a query that contains the info you want to display in
the following format:

For three selects, the first with 3 entries, the second with 3 for each of
the entries in select one, and the third with 2 or three entries for each
entry in select 2.

Col1 Col2 Col3
Sel1Val1 Sel2Val1 Sel3Val1
Sel1Val1 Sel2Val1 Sel3Val2
Sel1Val1 Sel2Val1 Sel3Val3
Sel1Val1 Sel2Val2 Sel3Val1
Sel1Val1 Sel2Val2 Sel3Val2
Sel1Val1 Sel2Val2 Sel3Val3
Sel1Val1 Sel2Val3 Sel3Val1
Sel1Val1 Sel2Val3 Sel3Val2
Sel1Val2 Sel2Val1 Sel3Val1
Sel1Val2 Sel2Val1 Sel3Val2
...
etc.

Use cfloop to create the query, by looping over each element in turn -
tedious, but quite fast

this query is the source format that is used by both tags

hope that helps

Richard