ajax jsp二级联动下拉框 select框
2010-02-23 11:12
465 查看
//==================>【index.jsp】=============================== <%@page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path=request.getContextPath(); %> <%@page import="com.sinoest.dfrf.orm.pojo.Mainmenu"%> <%@page import="com.sinoest.dfrf.orm.pojo.Menucontent"%> <% List<Mainmenu> mmlist = (List<Mainmenu>)request.getAttribute("mmList"); if(mmlist==null){ mmlist=new ArrayList(); } %> <% List<Menucontent> mclist = (List<Menucontent>)request.getAttribute("mcList"); if(mclist==null){ mclist=new ArrayList(); } %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>二级菜单</title> <script type="text/javascript"> var req; window.onload=function() {//页面加载时的函数 } function Change_Select(){//当第一个下拉框的选项发生改变时调用该函数 var province = document.getElementById('province').value; var url = "select?id="+ escape(province); if(window.XMLHttpRequest){ req = new XMLHttpRequest(); }else if(window.ActiveXObject){ req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url,true); //指定回调函数为callback req.onreadystatechange = callback; req.send(null); } } //回调函数 function callback(){ if(req.readyState ==4){ if(req.status ==200){ parseMessage();//解析XML文档 }else{ alert("不能得到描述信息:" + req.statusText); } } } //解析返回xml的方法 function parseMessage(){ var xmlDoc = req.responseXML.documentElement;//获得返回的XML文档 var xSel = xmlDoc.getElementsByTagName('select'); //获得XML文档中的所有<select>标记 var select_root = document.getElementById('city'); //获得网页中的第二个下拉框 select_root.options.length=0; //每次获得新的数据的时候先把每二个下拉框架的长度清0 for(var i=0;i<xSel.length;i++){ var xValue = xSel.childNodes[0].firstChild.nodeValue; //获得每个<select>标记中的第一个标记的值,也就是<value>标记的值 var xText = xSel.childNodes[1].firstChild.nodeValue; //获得每个<select>标记中的第二个标记的值,也就是<text>标记的值 var option = new Option(xText, xValue); //根据每组value和text标记的值创建一个option对象 try{ select_root.add(option);//将option对象添加到第二个下拉框中 }catch(e){ } } } </script> </head> <body> <div> <select name="province" id="province" onChange="Change_Select()"> <!--第一个下拉菜单--> <option value="0" selected>>>请选择</option> <% for (int i = 0; i < mmlist.size(); i++) { Mainmenu mm = mmlist.get(i); %> <option value="<%=mm.getId() %>"><%=mm.getName() %></option> <%}%> </select> <select name="city" id="city"> <!--第二个下拉菜单--> <option value="0">--请选择--</option> </select> </div> </body> </html> //==================>【SelectServlet类】=============================== package com.sinoest.dfrf.common; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.sinoest.dfrf.menu.service.DaoHangService; import com.sinoest.dfrf.orm.pojo.Menucontent; public class SelectServlet extends HttpServlet { private static final long serialVersionUID = 1L; public SelectServlet(){ super(); } public void destroy(){ super.destroy();} public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); request.setCharacterEncoding("GBK"); response.setCharacterEncoding("UTF-8"); String targetId = request.getParameter("id").toString(); System.out.println(targetId); //---调用Service-------------------------------- DaoHangService dhs=new DaoHangService(); List<?> mclist=dhs.mcallId(targetId); // 获得请求中参数为id的值 String xml_start = "<selects>"; String xml_end = "</selects>"; String xml = ""; if (targetId.equalsIgnoreCase("0")) { xml = "<select><value>0</value><text>>>请选择--</text></select>"; } if (targetId.equalsIgnoreCase(targetId)) { for (int j = 0; j < mclist.size(); j++) { Menucontent mc = (Menucontent) mclist.get(j); xml += "<select><value>"+mc.getId()+"</value><text>"+mc.getContent()+"</text></select>"; } } String last_xml = xml_start + xml + xml_end; response.getWriter().write(last_xml); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{doGet(request, response);} public void init() throws ServletException{} } //==================>【web.xml】=============================== <?xml version="1.0" encoding="UTF-8"?> <web-app http://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2ee" xmlns:http://www.w3.org/2001/XMLSchema-instance">http://www.w3.org/2001/XMLSchema-instance" version="2.4" xsi:schemaLhttp://java.sun.com/xml/ns/j2ee">http://java.sun.com/xml/ns/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>SelectServlet</servlet-name> <servlet-class>com.sinoest.dfrf.common.SelectServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SelectServlet</servlet-name> <url-pattern>/select</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app> |
相关文章推荐
- ajax jsp中二级下拉框联动 固定数据
- 实现jsp页面二级下拉框联动,实时读取数据库数据
- 一个无刷新二级联动下拉列表,同样适用与firefox,这算ajax么?
- Ajax实现二级联动下拉框(经典AJAX应用)
- PHP+ajax二级联动下拉选择菜单,IE+Firefox浏览器支持
- Ajax实现二级联动下拉框
- jquery通过struts2请求,在jsp页面形成二级联动下拉列表
- AJAX解析XML实例之下拉框省、市二级联动
- AJAX解析XML实例之下拉框省、市二级联动
- jsp中,使用js生成动态的数据库相关的二级联动下拉框
- Ajax实现二级联动下拉框
- AJAX+ASP.NET无刷新二级联动省市下拉列表
- AJAX应用案例--基于XML,以POST方式,完成二级下拉联动【省份-城市】
- Ajax实现二级联动下拉框
- AJAX之二级联动下拉列表
- ajax&json实现二级下拉框联动,简单示例
- jquery通过struts2请求,返回json数据,在jsp页面形成二级联动下拉列表
- ajax+jsp实现三级联动下拉框
- 用Ajax实现多级联动下拉列表For JSP(无限级别,JSON传输数据,含全国地区数据库