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

来源：懂视网责编：小采时间：2020-11-27 20:33:50

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

琥珀无限级联动菜单-JavaScript版_javascript技巧: 琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaS

推荐度：

点击下载本文 文档为doc格式

导读琥珀无限级联动菜单-JavaScript版_javascript技巧: 琥珀网 - javascript无限级联动菜单 body, td { font-family: 宋体; font-size: 12px; } /*---------------------------------------------------------------------------*\ | Subject: JavaS

<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> 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签： javascript 琥珀联动菜单

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐