json_js 无限级联动菜单代码

更新时间：2015-01-14 来源：js教程手机版 字体：大中小

【www.bbyears.com--js教程】

提示：您可以先修改部分代码再运行

<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="">
        
          
            琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]
          
          
            所 在 洲:
            <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>
          
          
            国　　家:
            <select name="guo" id="select" onChange="Menu(this.form,2);">
              <option value="" selected>-----请选择-----</option>
            </select>
          
          
            城　　市:
            <select name="shi" id="select2" onChange="Menu(this.form,3);">
              <option value="" selected>-----请选择-----</option>
            </select>
          
          
            地　　区:
            <select name="qu" id="select3">
              <option value="" selected>-----请选择-----</option>
            </select>
          
          
             
          
	  
	    <br>
	    
          
            下载地址：请点击这里
          
          
            在线Demo：请点击这里
          
          
            Bug 反馈：请点击这里
          
          
            联系方式：MSN:hopesoft@msn.com
          
          
             
          
          
            copyright(c) 2005 Hopesoft Studio 
          
        
	    <script language="javascript">	  	
	  		Menu(eval("document.form1"),1)
	  </script>
</form>
</body>
</html>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/wangyezhizuo/12207.html

链接：http://www.bbyears.com/wangyezhizuo/12207.html
json_js 无限级联动菜单代码(转载时请注明本文出处及链接)

猜你感兴趣

[pdo mysql]pdo分页代码 2015-01-14
ps做动态签名档_ps做动态签名 2015-01-14
[htc的数据连接]htc的数据表格 2015-01-14
[暗数菩提子]asp提高执行效率 2015-01-14
[非主流签名火星文]非主流ps签名教程 2015-01-14
【改变select文字颜色】改变select文字转向指定链接 2015-01-14
photoshop中文版免费下载|photoshop 制作印章效果 2015-01-14
【类似百度的app】类似百度搜藏添加新标签 2015-01-14
asp生成缩略图_asp生成缩略图代码 2015-01-14
【photoshop中文版免费下载】photoshop 非主流照片处理 2015-01-14

本类排行

本类最新

更多>>

json_js 无限级联动菜单代码

猜你感兴趣

热门标签

本类排行

本类最新