»
EnglishFrenchVietnamese

Print - Multilevel Drop Down Menu - JavaScriptBank.com

Full version: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu
URL: http://www.javascriptbank.com/multilevel-drop-down-menu.html

Multilevel Drop Down Menu © JavaScriptBank.comThis JavaScript code creates the selecting menus which display own items.

Full version: jsB@nk » Menu » Multilevel menu » Multilevel Drop Down Menu
URL: http://www.javascriptbank.com/multilevel-drop-down-menu.html



JavaScript
<SCRIPT LANGUAGE=JavaScript><!--////Multi drop menu//This will set up the two dimensional arrays to store your informationmenu=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 downmenu[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 downfor (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 informationfor (a=0;a<menu[z].length;a++){document.f.s.options[a]=newOption(menu[z][a].text,menu[z][a].value)}//This just puts the list back to the first optiondocument.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-->


HTML
<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-->