<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
<select id="county" name="county">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
$().ready(function(){
/****************************************************************/
//加载从数据库查询所有的省的信息,放置到省的下拉选中
$.post("provinceServlet",function(data,textStatus){
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].pid);
$option.text(dataObj[i].pname);
$("#province").append($option);
}
});
/****************************************************************/
//省的变化引起城市的变化
$("#province").change(function(){
var jsonObj={
pid:$(this).val()
}
//删除城市下所有的下拉选,保留<option value="">请选择.....</option>
$("#city option[value!='']").remove();
//删除县下所有的下拉选保留<option value="">请选择.....</option>
$("#county option[value!='']").remove();
$.post("cityServlet",jsonObj,function(data,textStatus){
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].cid);
$option.text(dataObj[i].cname);
$("#city").append($option);
}
});
});
/**********************************************************/
//城市的变化引起县的变化
$("#city").change(function(){
var jsonObj={
cid:$(this).val()
}
//删除县下所有的下拉选保留<option value="">请选择.....</option>
$("#county option[value!='']").remove();
$.post("countyServlet",jsonObj,function(data,textStatus){
var dataObj=eval("("+data+")");
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].tid);
$option.text(dataObj[i].tname);
$("#county").append($option);
}
});
});
/****************************************************/
});
</script>
</html>
servlet中返回的数据
List<County> list=countyDaoImpl.findCountysByCid(cid);
JSONArray jsonarray=JSONArray.fromObject(list);
out.println(jsonarray.toString());
代码来自:冯威---传智播客Ajax