琥珀无限级联动菜单-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">&nbsp;</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">&nbsp;</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需再刷新一下页面才能执行]

频道导航

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

您可能感兴趣的文章: