二级连动菜单
编程技术 / houtizong 发布于 3年前 79
二级连动菜单
源代码如下：
<!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>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
