javascript级联菜单，数据从数据库中获取

转载

mb5fd86ac270497 2014-03-22 18:55:00

文章标签 i++ html javascript sql oracle 文章分类 代码人生

1.html代码：

<%@ page contentType="text/html; charset=gb2312" %>
<%@ page import="java.sql.*" %>

<html>
<head>
<!--
放置javascript代码
-->
</head>

<body style="font-size: 12px;" bgcolor="eeeeee">
<form name="form1" action="SpecialityRelation_Insert.jsp" method="get">
<img onclick="history.go(-1);" src="../../images/back_blue.gif" onmousemove="this.src='../../images/back_red.gif';" onmouseout="this.src='../../images/back_blue.gif'" style="cursor:hand;">
<hr>

<%
	String logicalclass_name = request.getParameter("name");
	String logicalclass_id = request.getParameter("logicalclass_id");
%>

<input name="logicalclass_id" value="<%=logicalclass_id%>" type="hidden"> 
<table border="1px">
<tr>
<td width="100px">教学班名称</td>
<td width="300px">
<input class="MyInputBox" name="name" value="<%=logicalclass_name%>" style="background:'#dddddd';" size="50" readonly/>
</td>
</tr>
<tr>
<td>所在专业</td>
<td>
<select class="MySelect" name="department" size="1" id="department" onChange="changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value)">
<%
	rs = myDao.execQuery("select * from department");
	i=0;
	for(rs.next();!rs.isAfterLast();rs.next(),i++)
	{
%>
<option value="<%=rs.getString("id")%>"><%=rs.getString("Department_name")%></option>
<%  
	}
%> 
</select>

<select class="MySelect" name="division" size="1" id="division" onChange="changeDivision(document.form1.division.options[document.form1.division.selectedIndex].value)">
</select>

<input type="hidden" name="Switch" value="false">

<select class="MySelect" name="speciality" id="speciality" size="1" onChange="changeSpeciality(document.form1.speciality.options[document.form1.speciality.selectedIndex].value)"></select>

<select class="MySelect" name="Grade" id="Grade" size="1" onChange="changeGrade(document.form1.Grade.options[document.form1.Grade.selectedIndex].value)">
</select> 

<select class="MySelect" name="ObjectID" size="1">
</select> 

</td>
</tr>


<tr>
<td>说明</td>
<td><textarea name="other" class="MyTextArea" name="other" cols="48" rows="10"></textarea></td>
</tr>

<tr>
<td colspan="2" align="right">
<img src="../../images/submit_blue.gif" onmousemove="this.src='../../images/submit_red.gif';" onmouseout="this.src='../../images/submit_blue.gif'" style="cursor:hand;" onclick="document.form1.submit();">  
</td>
</tr>
</table>
</form>
</body>
</html>

　2.javascript代码：

2.javascript代码
<script language="javascript">

var DeparmentCount; //三级联动菜单代码
DeparmentCount = 0;
var DivisionCount;
DivisionCount = 0;
var SpecialityCount;
SpecialityCount = 0;

//GradeCount = 0;
ObjectIDCount = 0;
Department = new Array();
Division = new Array();
Speciality = new Array();
//Grade = new Array();
ObjectID = new Array();

<%
system.pub.oraclesql myDao = new system.pub.oraclesql();
ResultSet rs = myDao.execQuery("select * from division");
int i=0;
for(rs.next();!rs.isAfterLast();rs.next(),i++)
{
%>
		
Division[<%=i%>] = new Array("<%=rs.getString("Division_name")%>","<%=rs.getString("department_id")%>","<%=rs.getString("id")%>");

<%  
}//for
%>
		
DivisionCount = <%=i%>;
<%
	System.out.println("debug....1");
	rs = myDao.execQuery("select * from speciality");
	i=0;
	for(rs.next();!rs.isAfterLast();rs.next(),i++)
	{
%>
			
Speciality[<%=i%>] = new Array("<%=rs.getString("Speciality_name")%>","<%=rs.getString("division_id")%>","<%=rs.getString("id")%>");

<%  
}//for
%>
 SpecialityCount = <%=i%>;
		
<%
	rs = myDao.execQuery("select distinct speciality_id,grade,object_id,name from student t,object o where o.id= t.object_id");
	i=0;
	for(rs.next();!rs.isAfterLast();rs.next(),i++)
	{
%>

 ObjectID[<%=i%>] = new Array("<%=rs.getString("speciality_id")%>","<%=rs.getString("grade")%>","<%=rs.getString("object_id")%>","<%=rs.getString("name")%>");

<%  
}//for
%>
			
	ObjectIDCount = <%=i%>;
		
		
		
		function changeDepartment(DepartmentId)
		{
			document.form1.Switch.value="false";
			document.form1.division.length = 0;
			var DepartmentId = DepartmentId;
			var i;
			for (i=0;i < DivisionCount; i++)
			{
				if (Division[i][1] == DepartmentId)
				{ 
					document.form1.division.options[document.form1.division.length] = new Option(Division[i][0], Division[i][2]);
				}        
			}
			changeDivision(document.form1.division.value);
			if(document.form1.division.length!=0)
			{
				document.form1.division.style.visibility = 'visible';
			}
			else
			{
				document.form1.division.style.visibility = 'hidden';
			}  
			
		}
		
		function changeDivision(DivisionId)
		{
			document.form1.Switch.value="false";
			document.form1.speciality.length = 0;
			var DivisionId = DivisionId;
			var i;
			for (i=0;i < SpecialityCount; i++)
			{
				if (Speciality[i][1] == DivisionId)
				{ 
					document.form1.speciality.options[document.form1.speciality.length] = new Option(Speciality[i][0], Speciality[i][2]);
				}        
			}
			if(document.form1.speciality.length!=0)
			{
				document.form1.speciality.style.visibility = 'visible';
			}
			else
			{  
				document.form1.speciality.style.visibility = 'hidden';
				document.form1.Grade.style.visibility = 'hidden';
				document.form1.ObjectID.style.visibility = 'hidden';
				
			}
			changeSpeciality(document.form1.speciality.value);
		}
		
		function changeSpeciality(SpecialityID)
		{
			document.form1.Switch.value="false";
			document.form1.Grade.length = 0;
			var SpecialityID = SpecialityID;
			var i,j;
			var flag = 0;
			for (i=0;i < ObjectIDCount; i++)
			{
				if(ObjectID[i][0] == SpecialityID)
				{
					for(j=0,flag=0;j<document.form1.Grade.length;j++)
					{
						if(document.form1.Grade.options[j].value==ObjectID[i][1])
						{
							flag = 1;
							break;
						}
					}
					if(flag!=1)
					{
						document.form1.Grade.options[document.form1.Grade.length] = new Option(ObjectID[i][1], ObjectID[i][1]);
					}
				}        
			}
			if(document.form1.Grade.length!=0)
			{
				document.form1.Grade.style.visibility = 'visible';
			}
			else
			{  
				document.form1.Grade.style.visibility = 'hidden';
				document.form1.ObjectID.style.visibility ='hidden';
			}
			changeGrade(document.form1.Grade.value);
		}
		
		function changeGrade(GradeID)
		{
			document.form1.Switch.value="false";
			document.form1.ObjectID.length = 0;
			var GradeID = GradeID;
			var i;
			for (i=0;i < ObjectIDCount; i++)
			{
				if(ObjectID[i][1] == GradeID && ObjectID[i][0] == document.form1.speciality.value)
				{ 
					document.form1.ObjectID.options[document.form1.ObjectID.length] = new Option(ObjectID[i][3],ObjectID[i][2]);
				}        
			}
			if(document.form1.ObjectID.length!=0)
			{
				document.form1.ObjectID.style.visibility = 'visible';
			}
			else
			{  
				document.form1.ObjectID.style.visibility = 'hidden';
			}
		}
		
		
		function  initialSelect()
		{
			changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
		}
		
		
		</script>

作者：木木

出处：http://haore147.cnblogs.com/