琥珀无限级联动菜单-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">下载地址：请点击这里</td>  
          </tr>  
          <tr>  
            <td height="25" align="left">在线Demo：请点击这里</td>  
          </tr>  
          <tr>  
            <td height="25" align="left">Bug 反馈：请点击这里</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 Hopesoft Studio </td>  
          </tr>  
        </table>  
        <script language="javascript">            
              Menu(eval("document.form1"),1)  
      </script>  
</form>  
</body>  
</html> 
上一个：鼠标放上去则向上向下滚动的代码
下一个：静态网页加密
更多图片编程知识:
图片从右至左滚动JS

ajax请求返回Json格式数据如何循环输出成table形式

Node.js 的安装和控制台命令

ExtJs form界面显示之界面调整（游览器兼容性）

从Servlet到JSP，从Model1到Model2

[cocos2d-x从c++到js]02：解决在vs中修改js源文件无效
  
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。