jsp 联动菜单事例1

最新推荐文章于 2021-02-27 01:14:44 发布

AngelCathy

最新推荐文章于 2021-02-27 01:14:44 发布

阅读量184

点赞数

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

jsp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

[color=cyan]一：一个页面中两组一样的联动菜单，迭代出一样的内容[/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="MulSelectSPLD(1,'')">
<OPTION VALUE="" SELECTED>
</SELECT>

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

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

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

<SCRIPT LANGUAGE="JavaScript">
<!--
var selectAllIds=["aaa","bbb"];//对应select的id属性，有几个要做联动的select就写几个
arrViewValue=[]; arrDBValue=[]; //arrViewValue 用于select被显示出的值，arrDBValue 用于select中被添加到数据库的值

/* 此处的内容应该用数据库取出，用程序迭代填写到相应位置，下面的arrViewValue，arrDBValue是在向联动菜单的下拉框中灌输内容呢*/
arrViewValue[arrViewValue.length]=["aaa","aaa11-1"];//位置: 这些值分别对应A位置的每一个select中要显示的文字
arrDBValue[arrDBValue.length]=["aa1","111aaa"]; // 这些值分别对应B位置的每一个select中的value属性
arrViewValue[arrViewValue.length]=["aaa","aaa11-2"];
arrDBValue[arrDBValue.length]=["aa1","2-11aaa"];

arrViewValue[arrViewValue.length]=["bbb","bbb11-1"];
arrDBValue[arrDBValue.length]=["bb1","111bbb"];
arrViewValue[arrViewValue.length]=["bbb","bbb11-2"];
arrDBValue[arrDBValue.length]=["bb1","2-11bbb"];
arrViewValue[arrViewValue.length]=["bbb","bbb11-3"];
arrDBValue[arrDBValue.length]=["bb1","3-11bbb"];

arrViewValue[arrViewValue.length]=["aaa1","ccc111"];
arrDBValue[arrDBValue.length]=["aaa1-1","111ccc"];

arrViewValue[arrViewValue.length]=["bbb1","ddd111"];
arrDBValue[arrDBValue.length]=["bbb-1","111ddd"];

</script>

<script>
// 下拉框选择变化时触发的函数，用于重新生成其下级下拉框
// num : 下拉框的级数, 1 表示最顶级
function MulSelectSPLD(num,objId)
{

var i,j,arrTemp=[];
// 取得表单当前触发的下拉框的父级下拉框的值, 存放于 arrTemp 数组中(即不需要改变的值)
for(i=0;i<num;i++)
{
arrTemp[i]=document.getElementById(selectAllIds[i]+objId).value

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

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

var find=false

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

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

}

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

// 递归调用生成下一级菜单的内容
//MulSelect((num+1),'')
}
}
}
/*此jsp刚刚初始化时会调用这两个函数*/

/*第一组联动的初始函数*/
MulSelectSPLD(0,'')

/*第二组联动的初始值，第二个参数跟aaa1里面的1是有关系的*/
MulSelectSPLD(0,'1')
</SCRIPT>
</HTML>