当前位置:首页 > 开发 > Web前端 > 前端 > 正文

二级连动菜单

发表于: 2008-12-22   作者:crabdave   来源:转载   浏览次数:
摘要: 二级连动菜单   源代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator&quo

二级连动菜单

 

源代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
//准备一级菜单数据
var delType=new Array();
    delType[0]=new Array();
 delType[0].push("一级选项A");
 delType[0].push("A1");
 delType[1]=new Array();
 delType[1].push("一级选项B");
 delType[1].push("B1");
//准备二级菜单数据
var delReas=new Array();
    delReas[0]=new Array();
 delReas[0].push("二级选项A");
 delReas[0].push("A2");
 delReas[0].push("A1");
    delReas[1]=new Array();
 delReas[1].push("二级选项B");
 delReas[1].push("B2");
 delReas[1].push("A1");
 delReas[2]=new Array();
 delReas[2].push("二级选项C");
 delReas[2].push("C2");
 delReas[2].push("B1");
</script>
</HEAD>
<BODY>
<select id="firstSel" onchange="selSecondSel(this)">
</select>

<select id="secondSel">
</select>
<script language="javascript">
//初始化一级菜单
    var sel_Obj_f=document.getElementById("firstSel");
 
 for(var i=0;i<delType.length;i++){
    var oOption = document.createElement("OPTION");
  sel_Obj_f.options.add(oOption);
  oOption.innerText = delType[i][0];  
  oOption.value = delType[i][1];
  if(i==0){
  oOption.selected = "true";
  }
 }
 //初始化二级菜单
 selSecondSel(sel_Obj_f);
function selSecondSel(firstSel){
//取出一级菜单选择的是哪一个
    var sel_Index = firstSel.selectedIndex;
 var temp=firstSel.options[sel_Index].value;
 
//设置二级菜单
 var sel_Obj_s=document.getElementById("secondSel");
 sel_Obj_s.innerHTML="";
 //alert(delReas.length);
 for(var i=0;i<delReas.length;i++){
   if(delReas[i][2]==temp){
    var oOption = document.createElement("OPTION");
  sel_Obj_s.options.add(oOption);
  oOption.innerText = delReas[i][0];;
  oOption.value = delReas[i][1];  
  }
  }
 }
</script>
</BODY>
</HTML>

二级连动菜单

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
昨晚有网友于QQ问到如下问题,不过当时在忙于另外一篇博文编写,http://www.cnblogs.com/insus/arch
二级树形菜单,学习了 html代码 <body> <ul id="nav"> <li><a href="#Menu=Ch
二级横向菜单 html如下: <body> <ul id="nav"> <li><a href="#">我的资料
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
1: <html> 2: <head> 3: <title>This is a test!</title> 4: </head>
最近写了个二级菜单,代码非常简单干净,不过也是建立在jquery基础上 效果图: <script type="te
<!--[if ie 6]> <style> #navigation ul li { float: left; height: 1%; } #navigation
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号