PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967

| 积分获取 | 给我留言 | tag标签

关键字： mysql_select_db SQL语句鼠标特效摄像头表单选择器菜单导航图书分类 strtotime

您现在的位置：首页 > 网页特效 > 导航菜单 > 正文

javascript二级联动菜单

作者：w634381967来源：网络浏览：次时间：2020-10-24 21:11:49我要评论

分享到

内容介绍

javascript二级联动菜单，B5教程网推荐下载！站长必备js网页特效及js广告代码，提供高质量js特效下载。

<!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=gb2312">
    <title>javascript二级联动菜单</title>
    <style type="text/css">
    body, td
    {
      font-family: 宋体;
      font-size: 12px;
    }
    </style>
<script language="javascript">

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]="a"
MenuIdArr[2]="b"
MenuClass=2 //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">B5教程网  www.bcty365.com</td>
          </tr>
          <tr bgcolor="#FFFFFF">
            <td width="12%" height="24" align="center">所 在 洲:</td>
            <td><select name="a" id="a" onChange="Menu(this.form,1);">
                <option value="" selected>-----请选择类别-----</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="b" id="select" onChange="Menu(this.form,2);">
              <option value="" selected>-----请选择细类-----</option>
            </select></td>
          </tr>
          
          <tr bgcolor="F1F1F1">
            <td height="24" colspan="2" align="center"> </td>
          </tr>
	  </table>
	    <br>
  <script language="javascript">	  	
	  		Menu(eval("document.form1"),1)
	  </script>
</form>
</body>
</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

转载请注明（B5教程网）原文链接：：https://b5.mxunkeji.com/content-76-110-1.html

相关热词搜索： javascript二级联动菜单

上一篇：简单和易懂的js树形菜单

下一篇：一个简单的树状导航菜单

关于我们

关于我们

赞助我们

加入我们

版权声明

联系我们

联系我们

QQ技术群

合作方式

广告服务

业务合作

常见问题

意见反馈

网站地图

在线投稿

积分获取

在线充值

本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
告知(634381967@qq.com)，我们会在第一时间处理！
© 苏ICP备20040182号
B5教程网版权所有