联动下拉菜单（jQuery+JSON）

sunhawk

浏览: 8465 次
性别:
来自: 北京

最近访客更多访客>>

woodding2008

yanxunjian

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

json jQuery JSP Ajax Java

联动下拉菜单

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="include/js/jquery.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#city").change(function(){
			$.getJSON("option",{index:$(this).val()},function(myJSON){
				var myOptions="";
				for(var i=0;i<myJSON.length;i++){
					myOptions += '<option value="' + myJSON[i].optionValue + '">' + myJSON[i].optionDisplay + 
					'</option>';
				}
				$("#area").empty();
				$("#area").html(myOptions);
			});
		});
		$("#city").change();
	})
	</script>
  </head>
  
  <body>
    This is my JSP page. <br>
    <select id="city"> 
    	<option value="1">北京</option>
    	<option value="2">上海</option>
    	<option value="3">天津</option>
    </select>
    <select id="area">
    	
    </select>
  </body>
</html>

package cn.hawk.ajax;

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 Option extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        response.setContentType("text/html; charset=utf-8"); 
		String JSON_text = "";
		String city = (String) request.getParameter("index");
		System.out.println("城市号："+city);
		if(city.equals("1")){
			JSON_text = "[{optionValue:'011',optionDisplay:'海淀区'},{optionValue:'012',optionDisplay:'东城区'},{optionValue:'013',optionDisplay:'西城区'}]";
		}else if(city.equals("2")){
			JSON_text = "[{optionValue:'21',optionDisplay:'闵行区'},{optionValue:'22',optionDisplay:'宝山区'},{optionValue:'23',optionDisplay:'浦东区'}]";
		}else if(city.equals("3")){
			JSON_text = "[{optionValue:'31',optionDisplay:'和平区'},{optionValue:'32',optionDisplay:'南开区'},{optionValue:'33',optionDisplay:'塘沽区'}]";
		}
		
		PrintWriter out = null;
		try{
			out = response.getWriter();
		} catch (IOException ex) {
			ex.printStackTrace();
		}
		out.write(JSON_text);
		out.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}

}

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>Option</servlet-name>
    <servlet-class>cn.hawk.ajax.Option</servlet-class>
  </servlet>

  <servlet-mapping> 
    <servlet-name>Option</servlet-name>
    <url-pattern>/option</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>