jsp 联动菜单事例4

最新推荐文章于 2022-10-06 16:40:45 发布

AngelCathy

最新推荐文章于 2022-10-06 16:40:45 发布

阅读量448

点赞数

分类专栏： jsp 文章标签： JSP HTML C C++ C#

jsp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[color=olive]一：简单四级联动[/color]

<!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 http-equiv="Content-Type" content="text/html; charset=GBK">

</HEAD>

<BODY>

<SELECT NAME="aaa" id="aaa" style="width:7em" οnchange="MulSelect(1,'')">
<OPTION VALUE="" SELECTED>
</SELECT>

<SELECT NAME="bbb" id="bbb" style="width:7em">
<OPTION VALUE="" SELECTED>
</SELECT>

<SELECT NAME="ccc" id="ccc" style="width:7em" οnchange="MulSelect(1,'')">
<OPTION VALUE="" SELECTED>
</SELECT>

<SELECT NAME="ddd" id="ddd" style="width:7em">
<OPTION VALUE="" SELECTED>
</SELECT>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var arrSel=["aaa","bbb","ccc","ddd"];//A位置：对应select的id属性，有几个要做联动的select就写几个
arrData=[]; arrKey=[];

/* 此处的内容应该用数据库取出，用程序迭代填写到相应位置*/
arrData[arrData.length]=["aaa","aaa11-1","aaa22-1","aaa33-1"];//B位置: 这些值分别对应A位置的每一个select中要显示的文字
arrKey[arrKey.length]=["aa1","111aaa","222aaa","333aaa"]; //C位置: 这些值分别对应B位置的每一个select中的value属性
arrData[arrData.length]=["aaa","aaa11-2","aaa22-2","aaa33-2"];
arrKey[arrKey.length]=["aa1","2-11aaa","2-22aaa","2-33aaa"];

arrData[arrData.length]=["bbb","bbb11-1","bbb22-1","bbb33-1"];
arrKey[arrKey.length]=["bb1","111bbb","1-22bbb","1-33bbb"];
arrData[arrData.length]=["bbb","bbb11-2","bbb22-2","bbb33-2"];
arrKey[arrKey.length]=["bb1","2-11bbb","2-22bb","2-33bbb"];
arrData[arrData.length]=["bbb","bbb11-3","bbb22-3","bbb33-3"];
arrKey[arrKey.length]=["bb1","3-11bbb","3-22bbb","3-33bbb"];

arrData[arrData.length]=["ccc","ccc111","ccc222","ccc333"];
arrKey[arrKey.length]=["ccc1","111ccc","222ccc","333ccc"];

arrData[arrData.length]=["ddd","ddd111","ddd222","ddd333"];
arrKey[arrKey.length]=["ddd1","111ddd","222ddd","333ddd"];

</script>

<script>
// 下拉框选择变化时触发的函数，用于重新生成其下级下拉框
// num : 下拉框的级数, 1 表示最顶级
function MulSelect(num,objId)
{
var i,j,arrTemp=[];
// 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
for(i=0;i<num;i++)
{
arrTemp[i]=document.getElementById(arrSel[i]+objId).value

}
if(num<arrSel.length)
{
// 对于触发下拉框的下一级的下拉框
with(document.getElementById(arrSel[num]+objId))
{
// 先清空内容
length=0;

// 对所有的记录遍历
for(i=0;i<arrData.length;i++)
{

var find=false

// 如果父级下拉框的记录不是当前选中的值，则跳过
for(j=0;j<num;j++)
{
if(arrTemp[j]!=arrKey[i][j])
{
break;
}
}
if(j!=num)
{
continue;
}
// 这里已经可以保证第 i 项记录的数据属于当前选项的子数据

// 检查循环过程中是否已经添加了该选项，如果已有了, 则 fine = true
for(m=0;m<options.length;m++)
{

if(options[m].value==arrKey[i][num])
{
find=true
}
}

if(length==0||!find) // 若当前没有选项或者尚未添加该选项项，则添加之
{
options[options.length]=new Option(arrData[i][num],arrKey[i][num])
}
}

// 递归调用生成下一级菜单的内容
MulSelect((num+1),'')
}
}
}
MulSelect(0,'')
//MulSelect(0,'1')
</SCRIPT>
</HTML>