简单级联下拉框实现-优快云博客

1.简单的级联下拉框

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
  	<servlet-name>SelectCityServlet</servlet-name>
  	<servlet-class>com.demo.servlet.SelectCityServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>SelectCityServlet</servlet-name>
  	<url-pattern>/servlet/SelectCityServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

package com.demo.servlet;

 import java.io.IOException;
 import java.io.PrintWriter;

 import javax.servlet.ServletException;
 import javax.servlet.http.HttpServlet;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;


 public class SelectCityServlet extends HttpServlet {
	 public SelectCityServlet(){super();}
	 public void destory(){super.destroy();}
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		response.setCharacterEncoding("UTF-8");
		String state=request.getParameter("state");
		StringBuffer buffer=new StringBuffer("<state>");
		if("hn".equals(state)){
			buffer.append("<city>郑州</city><city>洛阳</city>");
		}else if("hb".equals(state)){
			buffer.append("<city>武汉</city><city>荆州</city><city>黄冈</city>");
		}
		buffer.append("</state>");
		PrintWriter out=response.getWriter();
		out.write(buffer.toString());
		out.close();
	}
 }

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <script type="text/javascript">
 function getResult(stateVal) {
     　　var url = "servlet/SelectCityServlet?state="+stateVal; 
     　　if (window.XMLHttpRequest) { 
             　　req = new XMLHttpRequest(); 
     　　}else if (window.ActiveXObject) { 
             　　req = new ActiveXObject("Microsoft.XMLHTTP"); 
     　　} 
     　　if(req){ 
             　　req.open("GET",url, true); 
             　　req.onreadystatechange = complete; 
             　　req.send(null); 
     　　} 
 } 
 function complete(){
     　　if (req.readyState == 4) { 
             　　if (req.status == 200) { 
                     　　var city = req.responseXML.getElementsByTagName("city"); 
                     　　file://alert(city.length);
                     　　var str=new Array();
                     　　for(var i=0;i<city.length;i++){
                             　　str[i]=city[i].firstChild.data;
                     　　}
                     　　file://alert(document.getElementById("city"));
                     　　buildSelect(str,document.getElementById("city"));
             　　}
     　　}
 }
 function buildSelect(str,sel) {
     　　sel.options.length=0;
     　　for(var i=0;i<str.length;i++) {
             　　sel.options[sel.options.length]=new Option(str[i],str[i])
     　　}
 }
 </script>
</head>
 <body>
 <select name="state" onChange="getResult(this.value)">
     　　<option value="">Select</option>
     　　<option value="hn">河南</option>
     　　<option value="hb">湖北</option>
 </select>
 <select id="city">
 　　<option value="">CITY</option>
 </select>
</body>
</html>