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

最新推荐文章于 2021-02-13 17:01:32 发布
最新推荐文章于 2021-02-13 17:01:32 发布
阅读量6.3k 收藏 1
点赞数
分类专栏： jboss+struts+bv+hpunix 文章标签： jsp function html javascript input import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/overmind/article/details/517856
版权

总共三级，通过学院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 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';
 }
}

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

 <select name="speciality"  size="1">
 </select>
</form>
  </body>
</html>

实现之后，从数据库里面读三个表里的信息，生成的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 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';
 }
}

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

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

   <option value="3">计算中心</option>

   <option value="1">工程学院</option>

   <option value="13">fff</option>

   <option value="14">gdsf</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">

 <select name="speciality"  size="1">
 </select>
</form>
  </body>
</html>

overmind
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯jsp实现3级联动菜单
11-03
纯jsp实现3级联动菜单，这个很容易看懂，只要你稍加修改就可以变成任何一级联动菜单哦~~~
纯JSP+DWR实现三级联动下拉选择菜单
guobing965816的专栏
12-30 639
纯JSP+DWR实现三级联动下拉选择菜单   原文地址  网上看到一些例子，对于一个简单的三级联动，都加上什么Struts, Hibernate诸如此类的框架。这个Ajax联动殊不知和这些框架有什么 关系，一个小Demo干嘛整得那么大。 今天我做了一个dwr+jsp做的例子。 web.xml: xml version="1.0" encoding="UTF-8"?>
jsp+ajax 三级联动菜单
03-05
jsp+ajax 数据库自己更改就OK了，很好的一个例子，希望有助于大家的学习
jsp结合js实现三级菜单联动.pdf
09-27
jsp结合js实现三级菜单联动.pdf
JSP实现三级菜单级联
Rainpoem的专栏
03-28 5686
曾经一度在为级联菜单而麻烦，花了好些功夫才做出来了，与大家一起分享，使用JavaScript结合Jsp从数据库读出的三级级联菜单，程序代码如下！   /* * Created on 2005-4-7 * * TODO To change the template for this generated file go to * Window - Preferences - Java - Code
纯JSP+DWR实现三级联动下拉选择菜单实现技巧
10-27
今天我做了一个dwr+jsp做的例子:纯JSP+DWR实现三级联动下拉选择菜单,感兴趣的朋友可以参考下，或许本文对你有所帮助
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
10-23
主要介绍了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法,涉及jsp数据库的操作及联动菜单的构造技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery+jsp实现省市县三级联动效果(附源码)
10-23
主要介绍了jQuery+jsp实现省市县三级联动效果,以完整实例形式分析了jQuery结合jsp读取MySQL数据库操作实现省市县三级联动效果的相关技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下
jsp中用js实现三级联动
11-28
jsp中用js代码实现了简易的三级联动功能
运用ajax+jsp+servlet实现三级级联菜单
09-03
运用Ajax实现3级的级联菜单。ajax是浏览器中的js程序向服务器端发送异步请求，返回的数据为json类型。
jsp实现三级联动的下拉列表框
12-11
jsp实现三级联动的下拉列表框
全国三级联动下拉菜单
12-14
现成的全国三级联动下拉菜单，省份--城市--区域
用jsp页面三级联动
qq_39514287的博客
09-21 593
type="text/javascript" src="js/address.js"> class="col-sm-3"> id="province" runat="server" class="form-control" name="stockFrom"> id="city" runat="server" class="form-control" name="
java实现三级级联菜单_三级联动菜单
weixin_29193359的博客
02-13 1261
linkage.jsppageEncoding="UTF-8"%>三级菜单联动getProvince();function getProvince(){var xmlHttp;if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") ;...
mysql jsp省市区三级联动_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
weixin_29959121的博客
01-27 351
在web中，实现三级联动很常见，尤其是利用jquery+json。但是从根本上来说jquery并不是最能让人容易理解的，接下来从最基本的javascript开始，实现由javascript+json+mysql实现三级联动：一、涉及到的知识点：1.ajax：(异步的javascript and xml)1.简单来说就是不用刷新整个页面实现局部页面的动态改变：也就是不用重新发布工程而做到改变想要改变...
在一个web项目里面添加hibernate（感谢龚立建同学）
04-29 2888
 在eclipse里面很简单，首先是有myEclipse，或者是有Hibernate的其它插件，然后对于这个项目add HibernateCapabilities就可以了。这个东东的核心是配置一个数据库和jdbc之间的连接代码如下 xml version=1.0 encoding=UTF-8?>DOCTYPE hibernate-configuration PUBLIC    
jsp关于分页和隔行变颜色的代码
08-10 1852
body,td { font-size: 14px; color: #000000;}th { font-size: 14px; color: #ffffff;}a:link { color: #000000; text-decoration: none;}a:visited { text-decoration: none; color: #000000;}a:hover { text-decor
在jsp里面使用下拉菜单进行查询
01-26 1707
  Audit jsp                                                                             报价方式>>                                                                                         if("-1".eq
jsp ajax三级联动,Spring MVC+JSP实现三级联动
最新发布
06-06
实现三级联动的基本思路是通过Ajax技术实现异步请求后端数据，然后动态生成页面元素实现级联效果。下面是一个Spring MVC+JSP实现三级联动的示例代码： 1. 前端JSP页面 ```jsp ; charset=UTF-8" pageEncoding="UTF...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值