首页 > 网络编程 > JavaScript > javascript技巧 > 琥珀无限级联动菜单-JavaScript版 2006-11-16 00:00:00 作者： 琥珀无限级联动菜单-JavaScript版 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta content="琥珀[hopesoft],http://www.51ajaxcom" name="author"> <title>琥珀网 - javascript无限级联动菜单</title> <style type="text/css"> body, td { font-family: 宋体; font-size: 12px; } </style> <script language="javascript"> /*---------------------------------------------------------------------------*\ | Subject: JavaScript三级联动菜单 | | Version: 1.0 | | Author: 琥珀【hopesoft】 | | FileName: HPMenu.js | | Created: 2005-10-16 | | LastModified: 2005-10-16 | | Download: http://www.10090.com/Demo/hpmenu/HPMenu.rar | | Explain: http://www.10090.com/Demo/ | | Demo: http://www.10090.com/Demo/ | | | | | |-----------------------------------------------------------------------------| | MSN: hopesoft at msn.com http://www.51ajax.com/bbs/ | | Copyright (c) 2004-2005 HopeSoftStudio | \*---------------------------------------------------------------------------*/ function Menu(theform,menuid) { /*---------------------------------------------------------------------------*\ * 1.变量定义 * /*---------------------------------------------------------------------------*/ //定义菜单级别MenuClass,菜单长度数组MenuLenArr, //菜单名称数组MenuArr,下级菜单数组SubMenuArr，菜单ID数组MenuIdArr var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr //定义分隔符：splitchar1,splitchar2 var splitchar1,splitchar2 //定义临时数组,子数组,数组长度, var arr,subarr,arrlen /*---------------------------------------------------------------------------*\ * 2.变量赋值 * /*---------------------------------------------------------------------------*/ MenuArr=new Array() MenuLenArr=new Array() SubMenuArr=new Array() MenuIdArr=new Array() MenuArr[1]="欧洲|||亚洲|||非洲|||大洋洲|||北美洲|||南美洲" //洲名|||... MenuArr[2]="欧洲###德国|||欧洲###法国|||北美洲###美国|||北美洲###加拿大|||亚洲###中国|||非洲###埃及|||大洋洲###澳大利亚|||南美洲###墨西哥" //洲名###国名|||... MenuArr[3]="中国###北京|||中国###上海|||美国###华盛顿|||美国###纽约|||德国###柏林|||法国###巴黎|||加拿大###多伦多|||埃及###开罗|||澳大利亚###悉尼|||墨西哥###墨西哥城" //国名###城市名|||... MenuArr[4]="北京###朝阳区|||上海###徐汇区|||广州###天河区|||纽约###曼哈顿区|||华盛顿###华盛顿区|||柏林###新柏林区|||巴黎###大巴黎区|||开罗###大开罗|||悉尼###悉尼市区|||墨西哥城###墨西哥城区" //国名###城市名|||... MenuIdArr[1]="zhou" MenuIdArr[2]="guo" MenuIdArr[3]="shi" MenuIdArr[4]="qu" MenuClass=4 //4级菜单 splitchar1="|||"; splitchar2="###"; /*---------------------------------------------------------------------------*\ * 3.生成数组 * /*---------------------------------------------------------------------------*/ for(iii=1;iii<=MenuClass;iii++) { arr=MenuArr[iii].split(splitchar1); len=arr.length; subarr=new Array() for (i=0;i<len;i++) { subarr[i]=arr[i].split(splitchar2); } len=subarr.length; SubMenuArr[iii]=subarr MenuLenArr[iii]=len } //============更改下级菜单====================== var self,submenu,thislen,thisarr //self本级菜单 //submenu子菜单 //theform:所在表单对象[type:object] //menuid:本级菜单级别ID，如1级菜单则为1 self=eval("document."+theform.name+"."+MenuIdArr[menuid]) submenu=eval("document."+theform.name+"."+MenuIdArr[menuid+1]) thislen=MenuLenArr[menuid+1] thisarr=SubMenuArr[menuid+1] submenu.length=0 submenu.options.add(new Option( "-----请选择-----","")); for (i=0;i<thislen;i++) { if (thisarr[i][0] == self.value) { submenu.options.add(new Option(thisarr[i][1], thisarr[i][1])); } } submenu.options[0].selected=true //============更改下级以下菜单============== var kkk for(kkk=menuid+2;kkk<=MenuClass;kkk++) { submenu=eval("document."+theform.name+"."+MenuIdArr[kkk]) submenu.length=0 submenu.options.add(new Option( "-----请选择-----","")); submenu.options[0].selected=true } } </script> <form name="form1" method="post" action=""> <table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC"> <tr bgcolor="F1F1F1"> <td height="24" colspan="2" align="center">琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]</td> </tr> <tr bgcolor="#FFFFFF"> <td width="12%" height="24" align="center">所 在 洲:</td> <td><select name="zhou" id="zhou" onChange="Menu(this.form,1);"> <option value="" selected>-----请选择-----</option> <option value='欧洲'>欧洲</option> <option value='亚洲'>亚洲</option> <option value='非洲'>非洲</option> <option value='大洋洲'>大洋洲</option> <option value='北美洲'>北美洲</option> <option value='南美洲'>南美洲</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">国 家:</td> <td><select name="guo" id="select" onChange="Menu(this.form,2);"> <option value="" selected>-----请选择-----</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">城 市:</td> <td><select name="shi" id="select2" onChange="Menu(this.form,3);"> <option value="" selected>-----请选择-----</option> </select></td> </tr> <tr bgcolor="#FFFFFF"> <td height="24" align="center">地 区:</td> <td><select name="qu" id="select3"> <option value="" selected>-----请选择-----</option> </select></td> </tr> <tr bgcolor="F1F1F1"> <td height="24" colspan="2" align="center"> </td> </tr> </table> <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="25" align="left">下载地址：<a href="http://www.10090.com/demo/hpmenu/HPMenu.rar" target="_blank">请点击这里</a></td> </tr> <tr> <td height="25" align="left">在线Demo：<a href="http://www.10090.com/demo/" target="_blank">请点击这里</a></td> </tr> <tr> <td height="25" align="left">Bug 反馈：<a href="http://www.10090.com/bbs/index.asp?boardid=60" target="_blank">请点击这里</a></td> </tr> <tr> <td height="25" align="left">联系方式：MSN:hopesoft@msn.com</td> </tr> <tr> <td height="25" align="left"> </td> </tr> <tr> <td height="50" align="center">copyright(c) 2005 <a href="http://www.51ajax.com/bbs">Hopesoft Studio</a> </td> </tr> </table> <script language="javascript"> Menu(eval("document.form1"),1) </script> </form> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JS实多级联动下拉菜单类，简单实现省市区联动菜单！JS简单实现多级Select联动菜单效果代码从QQ网站中提取的纯JS省市区三级联动菜单基于Javascript实现二级联动菜单效果JS实现的五级联动菜单效果完整实例PHP+JS三级菜单联动菜单实现方法javascript实现无限级select联动菜单js 实现省市区三级联动菜单效果javascript读取Xml文件做一个二级联动菜单示例JavaScript省市区三级联动菜单效果javascript 无限联动菜单效果代码JavaScript实现的联动菜单特效示例
