首先要导入下面的包，缺一不可
然后写jsp
<%@ 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>
<base href="<%=basePath%>">
<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">
//引入jquery
<script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//页面启动时调用函数二级联动第一级肯定是在页面刚出现时就有的
$(function(){
$.ajax({
type:"get",//get方法
url:"<%=basePath%>servlet/Ajax",//servlet路径
data:{parm:"从页面来的"},//传过去的参数
datatype:"text",//参数类型字符串
//成功后的回调参数,data是json值，status是传回状态
//这里值为"success"，jqXHR我忘了。。具体的可以查阅相关api
success:function(data,status,jqXHR)
{
//eval函数处理json字符串,可以去掉json{"a","b"}的格式
//只保留a,b
var result=eval(data);
//获取第一个select
//将jquery对象转换成dom对象，请注意是$("#provice")[0]
//jquery对象alert出来是object Object，而dom对象
//alert出来是html元素
var proObj=$("#provice")[0];
<!--alert(proObj);你可以自己试试-->
<!-- alert($("#provice"));-->
for(var i=0;i<result.length;i++)
{
//这句很关键,option选项都是new出来的，长度跟着循环在变
//option(值,键) proObj.options[proObj.options.length]=new Option(result[i],i);
}
}
});
//如此一来一级就好了
});
//二级select的值取决于一级，所以在一级select上监听change事件
$(function(){
$("#provice").change(function()
{
$.ajax({
type:"post",//这次换成post试试
url:"<%=basePath%>servlet/Ajax",
data:{parm:$("#provice option:selected").val()},//传去servlet的值为一级select的选中值
datatype:"text",
success:function(data,status,jqXHR)
{
var result=eval(data);
var cityObj=$("#city")[0];
//这一句很关键，每次option选项必须清空，不然每次option的值会一直累加在option中
cityObj.options.length=1;
for(var i=0;i<result.length;i++)
{
cityObj.options[cityObj.options.length]=new Option(result[i],i);
}
}
});
});
});
</script>
</head>
<body>
省:<select id="provice">
<option value="-1">-请选择省份-</option>
</select>
市:<select id="city">
<option>-请选择城市-</option>
</select>
</body>
</html>
服务端代码
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
//一级select到这里，我只是方便区分两次的传输，都用get也行
//返回值值编码格式，要与jsp最顶端pageEncoding="utf-8"%一致
response.setCharacterEncoding("utf-8");
//正式的二级联动应该从数据库里查询，获得List<Bean>集合,但是我台电脑没有，凑合一下
List<String> list=new ArrayList<String>();
list.add("广东");
list.add("贵州");
list.add("广西");
//从response中获得PrintWriter 对象
PrintWriter pw=response.getWriter();
//将list装换成json数组
JSONArray array=JSONArray.fromObject(list);
//向原来的页面写出字符串，print方法可以将各种类型的数据转换成字符串的形式输出。write方法只能输出字符、字符数组、字符串等与字符相关的数据。
pw.write(array.toString());
//强制刷新
pw.flush();
//关掉它
pw.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
int
//获取一级select选中的值 province=Integer.valueOf(request.getParameter("parm"));
List<String> list=new ArrayList<String>();
switch(province)
{
case 0:list.add("广州");list.add("深圳");break;
case 1:list.add("贵阳");list.add("遵义");;break;
case 2:list.add("柳州");list.add("桂林");;break;
}
PrintWriter pw=response.getWriter();
JSONArray array=JSONArray.fromObject(list);
pw.write(array.toString());
pw.flush();
pw.close();
}