How to write 2 selects, category and subcategory??

Inandjo · Oct 5, 2003

hi all,

i'm trying to have 2 select boxes on an html page:
the first select would have main categories, and second select would have sub categories, depending on the item clicked in the first select.
How can i write that in javascript?
Can i have just an example that i can replicate?
Thanx!

La faim justifie les moyens!

dwarfthrower · Oct 5, 2003

There's plenty in here already:

thread216-669576

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]

badaze · Oct 5, 2003

Hoping this will help you.

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
var displayedTopic = 0;
var mainTopic = new Array();
var subTopic  = new Array();
//
mainTopic[0] = &quot;A1 topic&quot;;
mainTopic[1] = &quot;A2 topic&quot;;
mainTopic[2] = &quot;A3 topic&quot;;
mainTopic[3] = &quot;A4 topic&quot;;
//
subTopic[0] = new Array();
subTopic[0][0] = &quot;A1 subtopic 1&quot;;
subTopic[0][1] = &quot;A1 subtopic 2&quot;;
subTopic[0][2] = &quot;A1 subtopic 3&quot;;
subTopic[0][3] = &quot;A1 subtopic 4&quot;;
//
subTopic[1] = new Array();
subTopic[1][0] = &quot;A2 subtopic 1&quot;;
subTopic[1][1] = &quot;A2 subtopic 2&quot;;
subTopic[1][2] = &quot;A2 subtopic 3&quot;;
subTopic[1][3] = &quot;A2 subtopic 4&quot;;
//
subTopic[2] = new Array();
subTopic[2][0] = &quot;A3 subtopic 1&quot;;
subTopic[2][1] = &quot;A3 subtopic 2&quot;;
subTopic[2][2] = &quot;A3 subtopic 3&quot;;
subTopic[2][3] = &quot;A3 subtopic 4&quot;;
//
subTopic[3] = new Array();
subTopic[3][0] = &quot;A4 subtopic 1&quot;;
subTopic[3][1] = &quot;A4 subtopic 2&quot;;
subTopic[3][2] = &quot;A4 subtopic 3&quot;;
subTopic[3][3] = &quot;A4 subtopic 4&quot;;

function fillTopic(selectObj,anArray) {
 for (i=0;i<anArray.length;i++) {
  selectObj.options[i] = new Option(anArray[i],i);
 }
}

function fillSubTopic(selectedTopicPos) {
 var nbOptions = document.all.subTopic.options.length;
 for (i=nbOptions-1;i>=0;i--) {	
	document.all.subTopic.options[i] = null;
 } 
 for (i=0;i<subTopic[selectedTopicPos].length;i++) {
  document.all.subTopic.options[i] = new Option(subTopic[selectedTopicPos][i],i);
 }
}
//-->
</script>

<select name=&quot;mainTopic&quot; onchange=&quot;fillSubTopic(this.selectedIndex)&quot;>
</select>

<select name=&quot;subTopic&quot;>
</select>

<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
fillTopic(document.all.mainTopic,mainTopic);
fillSubTopic(0);
//-->
</script>

</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to write 2 selects, category and subcategory??

Inandjo

Programmer

dwarfthrower

Programmer

badaze

Programmer

Similar threads

Part and Inventory Search

Sponsor