较为粗糙的实现
jsp页面 地 址
<select id="provincecode">
<option value="-1">选择省</option>
<option value="${p.get('code') }">${p.get("name") }</option>
</select>
<select id="citycode">
<option value="0">选择城市</option>
</select>
<select id="countycode">
<option value="0">选择区县</option>
</select>
js代码，我建议放在html的尾端
$("#provincecode").blur(function(){
//清楚value=0以外的值
$("#citycode option[value!='0']").remove();
var provincecode1=$("#provincecode").val();
var data={"provincecode":provincecode1};
var url="${BasePath}/userLogin/cityList.do";
$.post(url,data ,function(str){
var cityList=eval(str);
for (var i = 0; i < cityList.length; i++) {
$("#citycode").append("<option value ="+cityList[i].code+">"+cityList[i].name+"</option>");
}
});
});
/*联动获取区县列表 */
$("#citycode").blur(function(){
$("#countyId option[value!='0']").remove();
var citycod=$("#citycode").val();
var data={"citycode":citycod};
var url="${BasePath}/userLogin/countyList.do";
alert("快乐的一天！");
$.post(url,data,function(str){
var countyList=eval(str);
for(var i = 0;i < countyList.length; i++){
$("#countycode").append("<option value="+countyList[i].code+">" +countyList[i].name+"</option>");
alert("快乐的一天！");
}
});
});
Controller层代码
/**
* 显示城市列表
* @param provincecode
* @param model
* @return
*/
@RequestMapping("/cityList.do")
@ResponseBody
public String getCityList(Integer provincecode,Model model){
List<Map<String,Object>> cityList=userService.getCityList(provincecode);
Gson jsn = new Gson();
String str=jsn.toJson(cityList);
System.out.println(str);
return str;
}
/**
* 显示区县列表
* @param citycode
* @param model
* @return
*/
@RequestMapping("/countyList.do")
@ResponseBody
public String getCountyList(Integer citycode,Model model){
List<Map<String,Object>>countyList=userService.getCountyList(citycode);
Gson jsn=new Gson();
String str=jsn.toJson(countyList);
System.out.println(str);
return str;
}