jquery ajax 二级联动

首先实现jquery ajax的二级联动要下载个jquery.js 我在这里就不准备了自行百度下载

背景介绍：通过部门的ID来查找部门下的所有班级

我实现二级联动的思路是：先查询所有部门显示在页面上如图：

其次在使用下拉框的点击事件获取到部门的ID ，然后通过部门的ID 进行查找班级。

贴代码

前台JSP：

 <select id="department" name="departmentId" onChange="findClass()"><option value="0">请选择</option><c:forEach items="${departmentAll}" var="d"><option value="${d.departmentId}">${d.departmentName}</option></c:forEach></select><select id="classId" name="classId" ><option value="0">请选择</option></select>

ajax：

 function findClass(){var departmentId = $("#department").attr("value");$.ajax({url:"${pageContext.request.contextPath}/student/findClass",type:"get",timeout:"1000",data:{departmentId:departmentId},success:function(data){$("#classId option").remove();$("#classId").append("<option value='0'>请选择</option>");if (data != 0) {for ( var i = 0; i < data.length; i++) {var classId = data[i].classId;var className = data[i].className;$("#classId").append("<option value="+classId+">"+ className + "</option>");}}},error : function(XMLResponse) {alert(XMLResponse.responseText);}});}

这是后台controller的代码：

查询部门：

     ModelAndView modelAndView=new ModelAndView();List<Department> departmentAll = departmentService.findDepartmentAll();modelAndView.setViewName("student/add");modelAndView.addObject("departmentAll", departmentAll);return modelAndView;

查询班级：

 @RequestMapping(value="findClass")public String findClass(HttpServletRequest reuqest,HttpServletResponse response) throws Exception{response.setContentType("text/json; charset=UTF-8");//获取部门IDString departmentId = reuqest.getParameter("departmentId");Integer id = Integer.parseInt(departmentId);PrintWriter out = null;try{out = response.getWriter();}catch(Exception e){e.printStackTrace();}JSONArray array = new JSONArray();JSONObject member = null;try{//根据部门的Id 来查找部门下的所有班级List<Classes> ClassesList = classesService.findClassByDepartmentId(id);for(Classes classes:ClassesList){member = new JSONObject();member.put("classId", classes.getClassId());member.put("className", classes.getClassName());array.put(member);}}catch(Exception e){e.printStackTrace();}out.print(array.toString());return null;}

效果图

jquery ajax 二级联动相关推荐

二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
JavaWeb Ajax二级联动Bootstrap的基本使用
目录一.Ajax二级联动二.Bootstrap 基本使用
HTML实现二级联动下拉菜单,基于jquery的二级联动菜单实现代码
jQuery 1.3.2 简单实现select二级联动 jQuery 二级联动 $(document).ready(function(){ $("#province").chang ...
ajax二级联动源代码,Ajax二级联动菜单实现原理及代码
index.jsp: 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时的函数 } function Change_Select(){//当第一个下 ...
Struts2, jquery, select二级联动
1. 下载jquery.js文件放在webroot下js文件夹里 2. 配置struts.xml: <package name="default" namespace=&qu ...
Ajax 二级联动
准备工作导入vue&jquery的js包导包部分省略不写接下来应该先写html页面的代码 <div id="app"><form>手机号:< ...
jquery实现二级联动不与数据库交互
<select id="pro" name="pro" style="width:90px;"></select> ...
Ajax二级联动下拉列表
客户端与服务器端采用XML进行通信. 程序中涉及到了xml文件的组装发送和解析. 服务器端 public class CityServlet extends HttpServlet {private ...
ajax实现二级联动
用js实现简单的ajax二级联动(如上图) HTML代码: 1 省份:<select id="province" onchange="getCity();" ...

jquery ajax 二级联动

jquery ajax 二级联动相关推荐

最新文章

热门文章