javascript级联菜单,数据从数据库中获取
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>
作者:木木