« »

This JavaScript code creates the selecting menus which display own items.

Label: Multilevel Drop Down Menu

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT LANGUAGE=JavaScript>
<!--//
//Multi drop menu

//This will set up the two dimensional arrays to store your information
menu=new Array()
menu[0]=new Array()
menu[1]=new Array()
menu[2]=new Array()

//This is where you populate your arrays with information
//The first parameter is what gets displayed in the drop down
//The second parameter is set to the value of the drop down

menu[0][0]=new Option("JavaScriptBank.com","http://javascriptbank.com")
menu[0][1]=new Option("123Webmaster","http://www.123webmaster.com")
menu[0][2]=new Option("FreeWebTemplates","http://www.freewebtemplates.com")

menu[1][0]=new Option("FreewareFiles","http://www.freewarefiles.com")
menu[1][1]=new Option("Httpcity","http://www.httpcity.com")
menu[1][2]=new Option("Htmlforums","http://www.htmlforums.com")

menu[2][0]=new Option("PerlAccess","http://www.perlaccess.com")
menu[2][1]=new Option("1-Click-Clipart","http://www.1-click-clipart.com/")
menu[2][2]=new Option("FontFiles","http://www.fontfiles.com/")                    
function fillList(z){
//This will loop through and erase the existing drop down
for (a=document.f.s.options.length-1;a>0;a--){document.f.s.options[a]=null}

//This will loop through and fill the drop down with the new information
for (a=0;a<menu[z].length;a++){document.f.s.options[a]=new
Option(menu[z][a].text,menu[z][a].value)
}
//This just puts the list back to the first option
document.f.s.selectedIndex=0
}

//-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<FORM NAME=f>

<!--// The number within the call to the fillList function determines which array will be used to fill in the list //-->
<A HREF=Javascript:fillList(0)>Menu 1</A>
<A HREF=Javascript:fillList(1)>Menu 2</A>
<A HREF=Javascript:fillList(2)>Menu 3</A>
<BR>
<SELECT NAME=s style="width:200">
<OPTION VALUE="#">What site do you want to visit?
<OPTION VALUE="#">
<OPTION VALUE="#">Welcome
<OPTION VALUE="#">To
<OPTION VALUE="#">A1
<OPTION VALUE="#">JavaScripts
<OPTION VALUE="#">
</SELECT>

<!--// Clicking this button will take you to the url that corresponds to the choice you made from the drop down //-->
<INPUT TYPE=button onclick="location=document.f.s.options[document.f.s.selectedIndex].value" VALUE=">>">
</FORM>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->