javascript级联菜单，数据从数据库中获取-优快云博客

本文介绍了一个用于录入教学班信息的网页表单及其实现的部门、专业等多级联动选择功能。通过Java后端与JavaScript前端相结合的方式，实现了下拉列表的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

<br>

　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>