首先要導入下面的包，缺一不可
然後寫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();
}