Hello,
I have 100 Categories in a database such as Banks, Hotels, Restaurants, etc. Each category has about 10-20 subcategories.

Using ColdFusion, I dynamically list each 100 Categories as an href link. When the user clicks on a category, such as Banks, the value is passed to the same page, and all the subcategories associated with banks, such as Wells Fargo,B of A, and Great Western, are output underneath my 100 main categories.
However, I want each subcategory to be output underneath the appropriat category for a dropdown affect like in Windows Explorer.

How can I use Javascript to dynamically list all subcategories under the apprpiate main category?

Thanks,
Jason

this is my code to output subcategories under the whole list of categories:

<tr>
<td>
<cfoutput query="catquery">
<img src="http://jascomp/dmaps2/Images/#SYMBOL#.gif" height=15 width=15>
<A HREF="d2tree2.cfm?Cat=#CATEGORY#" onmouseover="window.document.catform.rollimage.src='http://jascomp/dmaps2/Images/expand.gif'" onmouseout="window.document.catform.rollimage.src='http://jascomp/dmaps2/Images/blank.gif'"><b>#CATEGORY#</b></a><br>
</cfoutput>
</td>
</tr>


<tr>
<td>
<CFIF isDefined("url.cat")>
<cfoutput query="comquery">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://jascomp/dmaps2/Images/#SYMBOL#.gif" height=10 width=10>
<A HREF="d2tree2.cfm?ID=#ID#" onmouseover="window.document.catform.rollimage.src='http://jascomp/dmaps2/Images/mapit.gif'" onmouseout="window.document.catform.rollimage.src='http://jascomp/dmaps2/Images/blank.gif'">#COMPANY#</a><br>
</cfoutput>
</CFIF>
</td>
</tr>

Hi Jason,

I'm not exactly sure what you mean. You want the output to look something like this?


-- Banks
|--Wells Fargo
|--Bank of America
|--Great Western


or do you want the output put into a selection list? If the former, do you expect them to expand/contract if a user clicks on "--Banks"? And, are they simply to be text or links?

Also exactly how is Cold Fusion delivering the output? as an array or a string?

Vinny

Absolutely Vinny,

This is how I want it to look:

code:--------------------------------------------------------------------------------
-- Banks
|--Wells Fargo
|--Bank of America
|--Great Western
--------------------------------------------------------------------------------


All items will be linked (HREF) to another frame.

Thanks,
jason

Hi Jason,

I still need to know how the output is being delivered. I also don't know if this is supposed to be crossBrowser. Nor am I sure whether this is supposed to be output to the same page or a new one. If the former, you will need to use a hidden div that once written you change the visibility to visible/show. If the latter, you can simply document.write it out.

Presume you have the output in an array called subCat. You can then output it to the page with the following loop:

for (i = 0; i < subCat.length; i++)
str = "<a href=' " + theURL + " '>--" + subCat[i] + "</a><br>";


Vinny

Thanks Vinny,

This should be output on the same page. It is for Netscape 4.0 and up and IE 5.0 and up.

Thanks,
Jason

Hi Jason,

ok.
1) if you are unfamiliar with dHTML, see the introductory script/tutorial at my site (GrassBlade)


<div id='subCat' style='position:absolution;......>
&nbsp;
</div>

function fillDiv(divID, cat, theURL, subCat )
{
str = "--" + cat + "<br>"; // category -- banks for example
for (i = 0; i < subCat.length; i++)
str += "<a href=' " + theURL[i] + " '>--" + subCat[i] + "</a><br>";

if (document.all)
{
document.all[divID].innerHTML = str;
document.all[divID].visibility = 'visible';
}
if (document.layers)
{
document.layers[divID].open();
document.layers[divID].write(str);
document.layers[divID].close();
document.layers[divID].visibility = 'show';

}
}

vinny