动态的三级联动菜单，无刷新，jsp实现

最新推荐文章于 2020-06-16 14:01:22 发布

overmind

最新推荐文章于 2020-06-16 14:01:22 发布

阅读量6.5k

点赞数

分类专栏： jboss+struts+bv+hpunix 文章标签： jsp function html javascript input import

本文链接：https://blog.csdn.net/overmind/article/details/517856

版权

jboss+struts+bv+hpunix 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

总共三级，通过学院department选择系division,通过系选择专业speciality

<%@ page language="java" import="java.util.*,java.lang.*,java.sql.*" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
  var DeparmentCount; //三级联动菜单代码
  DeparmentCount = 0;
  var DivisionCount;
  DivisionCount = 0;
  var SpecialityCount;
  SpecialityCount = 0
  Department = new Array();
  Division = new Array();
  Speciality = 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")%>");
<%  }%>
  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")%>");
<%  }%>
  SpecialityCount = <%=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);
}

function initialSelect(){
changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
}

</script>
</head>

<body οnlοad="initialSelect();">
<form name="form1">
<select name="department" size="1" id="department" style="width:20%" 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 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">

实现之后，从数据库里面读三个表里的信息，生成的html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript">
  var DeparmentCount; //三级联动菜单代码
  DeparmentCount = 0;
  var DivisionCount;
  DivisionCount = 0;
  var SpecialityCount;
  SpecialityCount = 0
  Department = new Array();
  Division = new Array();
  Speciality = new Array();

Division[0] = new Array("ccddd","13","100");

Division[1] = new Array("cc","14","101");

Division[2] = new Array("cczz","14","102");

Division[3] = new Array("sdfgsdfg","14","103");

Division[4] = new Array("asdasdf","14","104");

Division[5] = new Array("zxcvzxcv","14","106");

Division[6] = new Array("zxcvzv","2","107");

Division[7] = new Array("zxcvzxcv","13","108");

Division[8] = new Array("电视新闻系","2","4");

Division[9] = new Array("电视摄影系","2","5");

Division[10] = new Array("教研室","3","6");

Division[11] = new Array("机房","3","7");

Division[12] = new Array("办公室","3","8");

Division[13] = new Array("zxcv","14","105");

Division[14] = new Array("通信工程系","1","1");

Division[15] = new Array("电子信息工程系","1","2");

Division[16] = new Array("科学艺术系","1","3");

Division[17] = new Array("aaaa","15","109");

DivisionCount = 18;

Speciality[0] = new Array("ertwert","101","100");

Speciality[1] = new Array("vzxcvzxcv","100","101");

Speciality[2] = new Array("zzz","100","102");

Speciality[3] = new Array("asdf","100","103");

Speciality[4] = new Array("新闻评论","4","1");

Speciality[5] = new Array("网络新闻","4","2");

Speciality[6] = new Array("多媒体技术","1","3");

Speciality[7] = new Array("艺术摄影","5","4");

Speciality[8] = new Array("kkkk","109","104");

  SpecialityCount = 9;

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);
}

function initialSelect(){
changeDepartment(document.form1.department.options[document.form1.department.selectedIndex].value);
}

<option value="2">电视与新闻学院</option>

   <option value="15">zxcef</option>

</select>

    <select 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">