二级连动菜单

最新推荐文章于 2022-03-11 11:30:02 发布

crabdave

最新推荐文章于 2022-03-11 11:30:02 发布

阅读量142

点赞数

分类专栏： JavaScript 文章标签： JavaScript IE Firefox F# HTML ViewUI

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

二级连动菜单

源代码如下：

<!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" οnchange="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>