脚本语言 订阅所有【脚本语言】的日志

琥珀无限级联动菜单

编辑:admin 日期:2006-06-27

字体大小: 小 中 大
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta content="琥珀[hopesoft],http://www.10090.com" 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/ |
| |
| You may use this code on your item |
| this entire copyright notice appears unchanged |
| and you clearly display a link to http://www.10090.com/ |
| |
|-----------------------------------------------------------------------------|
| MSN: hopesoft@msn.com QQ: 11318729 http://www.10090.com |
| Copyright © 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>
<br>
<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© 2005 <a href="http://www.10090.com">Hopesoft Studio</a> </td>
</tr>
</table>
<script language="javascript">  
Menu(eval("document.form1"),1)
</script>
</form>
</body>
</html>

使用时更改Javascript中以下几行内容：
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="###";

如你要实现一个三级联动菜单，表单名为form1,一级菜单ID为sel1,二级菜单ID为sel2，三级菜单ID为sel3，则上述代码应如下：
MenuArr[1]="欧洲|||亚洲"  
MenuArr[2]="亚洲###中国|||欧洲###德国
MenuArr[3]="中国###北京|||德国###柏林

MenuIdArr[1]="sel1"
MenuIdArr[2]="sel2"
MenuIdArr[3]="sel3"
MenuClass=3 //3级菜单

splitchar1="|||";
splitchar2="###";

在HTML中调用时，更改相应菜单项ID及onchange代码即可

上一篇: 实现浏览器全屏窗口的几种方法
下一篇: 显示确认对话框的ASP函数
文章来自: 网络
引用通告: 查看所有引用 | 我要引用此文章
Tags: 联动菜单
最新日志:
评论: 0 | 引用: 0 | 查看次数: 7169
发表评论
请登录后再发表评论！