级联菜单在web项目中经常我们会用到,现在大概有这么2中思路, 用javascript 脚本将要级联的数据做成一个数组,在选择第一级的时候,级联第2级的数据。这种在数据量不大,关系不是很复杂时很管用。 运用Ajax的异步访问。 js部分: var XMLHttpReq; var currentSort; //创建XMLHttpRequest对象 function createXMLHttpRequest() { if(window.XMLHttpRequest) { //Mozilla 浏览器 XMLHttpReq = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE浏览器 try { XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } } //发送请求函数 function sendRequest(url) { createXMLHttpRequest(); XMLHttpReq.open("GET", url, true); XMLHttpReq.onreadystatechange = processResponse;//指定响应函数 XMLHttpReq.send(null); // 发送请求 } // 处理返回信息函数 function processResponse() { if (XMLHttpReq.readyState == 4) { // 判断对象状态 if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息 updateMenu(); } else { //页面不正常 alert(XMLHttpReq.status+"您所请求的页面有异常。"); } } } //更新菜单函数 function updateMenu() { var res=XMLHttpReq.responseXML.getElementsByTagName("res") /**下面是用innerHTML输出控件内容的一般用法**/ //var subMenu = ""; //for(var i = 0; i < res.length; i++) { // subMenu = subMenu + " " + res[i].firstChild.data + ""; //} //currentSort.innerHTML = subMenu; var list = document.all.list; list.options.length=0; list.add(new Option("---请选择---","")); for(var i=0;i<res.length;i++){ list.add(new Option(res[i].firstChild.data,res[i].firstChild.data)); } } // 创建级联菜单函数 function showSubMenu(obj) { //currentSort =document.getElementById(obj); //currentSort.parentNode.style.display = ""; sendRequest("/LQweb/MenuAjaxServlet?id=" + obj); /**下面这一句的作用是:每次选择后回到第一个选项**/ //document.all.mli.options[0].selected=true; } jsp文件部分: <jsp:useBean id="depts" class="com.mei.DataToGetDepts"></jsp:useBean>部门:<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="mli" style="width:150px"> <option value=''>---请选择---</option> <c:forEach var="item" items="${depts.depts}"> <option value="${item.id}">${item.department }</option> </c:forEach> </select> <br /> 姓名:<select name="list" id="list2" onchange="this.location()" style="width:150px"> <option name="">---请选择---</option> </select> servlet部分: package com.mei; import java.io.IOException; import java.util.Iterator; import java.util.List; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.hibernate.Session; import org.hibernate.criterion.Expression; import com.mei.hibernate.HDept; import com.mei.hibernate.HUser; import com.mei.hibernate.HibernateUtil; /** * Servlet implementation class for Servlet: MenuAjaxServlet * */ public class MenuAjaxServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet { /** * */ private static final long serialVersionUID = -3352981617371090766L; /* (non-Java-doc) * @see javax.servlet.http.HttpServlet#HttpServlet() */ public MenuAjaxServlet() { super(); } /* (non-Java-doc) * @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub process(request,response); } /* (non-Java-doc) * @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub process(request,response); } private void process(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{ String str=request.getParameter("id"); Integer id=new Integer(str); HibernateUtil.beginTransaction(); Session session=HibernateUtil.getSession(); HDept dept=(HDept) session.load(HDept.class, id); List list=session.createCriteria(HUser.class).add(Expression.eq("department",dept)).list(); Iterator it=list.iterator(); response.setContentType("text/xml; charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); ServletOutputStream out= response.getOutputStream(); out.println(""); while(it.hasNext()){ HUser user=(HUser)it.next(); out.println(""+user.getName()+""); } out.println(""); out.close(); } }
|