琥珀无限级联动菜单-JavaScript版_javascript技巧

2019年9月14日 13:34:05js教程评论414 views阅读模式

<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需刷新才能执行]