<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("1","A","选项1的值");//array中第一个元素为二级菜单显示的选项,第二个元素为它上级选项的值,第三个元素为二级菜单本选项的值,下同
subcat[1] = new Array("2","A","选项2的值");
subcat[2] = new Array("3","A","选项3的值");
subcat[3] = new Array("4","A","选项4的值");
subcat[4] = new Array("10","B","选项10的值");
subcat[5] = new Array("20","B","选项20的值");
subcat[6] = new Array("30","B","选项30的值");
subcat[7] = new Array("40","B","选项40的值");
subcat[8] = new Array("100","C","选项100的值");
subcat[9] = new Array("200","C","选项200的值");
subcat[10] = new Array("300","C","选项300的值");
onecount=11;
</script>
<script language = "JavaScript">
function changelocation(locationid)
{
document.form1.select2.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.form1.select2.options[document.form1.select2.length] = new Option(subcat[i][0], subcat[i][2]);
}
}
}
</script>
<form name="form1">
<select style="width:90" name='select1' onChange='changelocation(document.form1.select1.options[document.form1.select1.selectedIndex].value)' size='1'>
<option value=>请选择</option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
<select name='select2' style="width:90">
</select></form>
以下代码放在页面test.jsp中,测试时修改数据库连接及提取数据部分即可。
<%@page contentType="text/html;charset=gb2312"%>
<%@page import="java.sql.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多选三级级联菜单</title>
</head>
<%
/**
假设表table有以下字段:地区area,省份province,城市city
*/
%>
<body style="margin-top:0px;margin-left:0px;margin-right:0px;margin-bottom:5px">
<form action="" method="post" style="margin:0" name="dataForm">
<table align="CENTER" cellspacing="0" cellpadding="0" width="100%" >
<tr>
<td valign="MIDDLE" >
一级列表:<br/>
<select multiple name="st1" size="5" οnchange="corpChoose1()">
<%
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
String url="jdbc:oracle:thin:@localhost:1521:orcl";
//orcl为你的数据库的SID
String user="scott";
String password="tiger";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt1=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
Statement stmt2=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
Statement stmt3=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
String st2valueStr="";
String st2optionStr="";
String st3valueStr="";
String st3optionStr="";
ResultSet rs1=stmt1.executeQuery("select distinct area from table_1");
ResultSet rs2=null;
ResultSet rs3=null;
while (rs1.next()) {
rs2=stmt2.executeQuery("select distinct province from table_1 where area='"+rs1.getString(1)+"'");
while (rs2.next()) {
st2valueStr=st2valueStr+rs2.getString(1)+",";
st2optionStr=st2optionStr+rs2.getString(1)+",";
rs3=stmt3.executeQuery("select city from table_1 where province='"+rs2.getString(1)+"'");
while (rs3.next()) {
st3valueStr=st3valueStr+rs3.getString(1)+",";
st3optionStr=st3optionStr+rs3.getString(1)+",";
}
st3valueStr=st3valueStr.substring(0,st3valueStr.length() - 1)+";";
st3optionStr=st3optionStr.substring(0,st3optionStr.length() - 1)+";";
}
st2valueStr=st2valueStr.substring(0,st2valueStr.length() - 1)+";";
st2optionStr=st2optionStr.substring(0,st2optionStr.length() - 1)+";";
st3valueStr=st3valueStr.substring(0,st3valueStr.length() - 1)+"#";
st3optionStr=st3optionStr.substring(0,st3optionStr.length() - 1)+"#";
%>
<option value="<%=rs1.getString(1)%>"><%=rs1.getString(1)%></option>
<%
}
if (st2valueStr.length()>0)
{
st2valueStr = st2valueStr.substring(0,st2valueStr.length() - 1);
}else{
st2valueStr = "";
}
if (st2optionStr.length()>0)
{
st2optionStr = st2optionStr.substring(0,st2optionStr.length() - 1);
}else{
st2optionStr = "";
}
if (st3valueStr.length()>0)
{
st3valueStr = st3valueStr.substring(0,st3valueStr.length() - 1);
}else{
st3valueStr = "";
}
if (st3optionStr.length()>0)
{
st3optionStr = st3optionStr.substring(0,st3optionStr.length() - 1);
}else{
st3optionStr = "";
}
stmt1.close();
stmt2.close();
stmt3.close();
conn.close();
%>
</select>
</td>
<td valign="MIDDLE" width="">
二级列表:<br/>
<select multiple name="st2" size="10" οnchange="corpChoose2()">
</select>
</td>
<td valign="MIDDLE">
三级列表:<br/>
<select multiple name="st3" size="10" >
</select>
</td>
</tr>
</table>
</form>
<script>
function corpChoose1()
{
//生成二级菜单
dataForm.st2.length = 1;
var value = "<%=st2valueStr%>".split(";");
var option = "<%=st2optionStr%>".split(";");
var valuePP = "";
var optionPP = "";
var valueA="",optionA="";
var aa=0;
for (var j=0;j<dataForm.st1.length;j++)
{
if (dataForm.st1.options[j].selected)
{
if(aa>0){
valueA=valueA+","+value[j];
optionA=optionA+","+option[j];
}else{
valueA=value[j];
optionA=option[j];
}
aa++;
}
}
valuePP = valueA.split(",");
optionPP = optionA.split(",");
dataForm.st2.length = optionPP.length;
dataForm.st2.options[0].text ="请选择";
dataForm.st2.options[0].value = "";
for (var jj = 0;jj<optionPP.length;jj++)
{
dataForm.st2.options[jj].text = optionPP[jj];
dataForm.st2.options[jj].value = valuePP[jj];
}
}
function corpChoose2()
{
//生成三级菜单
dataForm.st3.length = 1;
var value = "<%=st2valueStr%>".split(";");
var option = "<%=st2optionStr%>".split(";");
var valuePP = "";
var optionPP = "";
var st3valueA="",st3optionA="";
var aa=0,bb=0;
var st3value = "<%=st3valueStr%>".split("#");
var st3option = "<%=st3optionStr%>".split("#");
for (var i=0;i<dataForm.st1.length;i++)//一级菜单
{
var option1=option[i].split(",");
var value1=value[i].split(",");
var st3option1=st3option[i].split(";");
var st3value1=st3value[i].split(";");
if (dataForm.st1.options[i].selected)//判断是否被选中
{
for(var j=0;j<option1.length;j++){//二级菜单
var st3option2=st3option1[j].split(",");
var st3value2=st3value1[j].split(",");
for (var k=0;k<dataForm.st2.length;k++){ //循环判断是否被选中
if (dataForm.st2.options[k].selected && dataForm.st2.options[k].value==value1[j])
{
for(var l=0;l<st3option2.length;l++){//三级菜单
if(bb>0){
st3valueA=st3valueA+","+st3value2[l];
st3optionA=st3optionA+","+st3option2[l];
}else{
st3valueA=st3value2[l];
st3optionA=st3option2[l];
}
bb++;
}
}
}
}
}
}
var st3valuePP = st3valueA.split(",");
var st3optionPP = st3optionA.split(",");
dataForm.st3.length = st3optionPP.length;
for (var jj = 0;jj<st3optionPP.length;jj++)
{
dataForm.st3.options[jj].text = st3optionPP[jj];
dataForm.st3.options[jj].value = st3valuePP[jj];
}
}
corpChoose2();
corpChoose1();
</script>
</body>
</html>