javascript无限级联动菜单

最新推荐文章于 2021-12-25 09:40:20 发布

iteye_7488

最新推荐文章于 2021-12-25 09:40:20 发布

阅读量148

点赞数

分类专栏： Web前端文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/iteye_7488/article/details/81936650

版权

Web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function Menu(theform,menuid) {　
var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr
var splitchar1,splitchar2
var arr,subarr,arrlen
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="###";

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=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>


</head>

<body>


<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"></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>
</table>
</form>


</body>
</html>