省市区的三级联动
后台action代码:
//接收Json数据
private String result;
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
//获得省份集合
public String getProvince(){
List<City> list=cityService.getProvince();
Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
result=json.toJson(list);
return SUCCESS;
}
//获得市的集合
public String getCity(){
String getProvinceId=request.getParameter("provinceId");
//log.info("从页面获得的provinceid:"+getProvinceId);
Integer provinceId=Integer.valueOf(getProvinceId);
List<City> list=cityService.getCity(provinceId);
Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
result=json.toJson(list);
return SUCCESS;
}
//获得区的集合
public String getArea(){
String getCityID=request.getParameter("cityId");
//log.info("从页面获得的cityid:"+getCityID);
Integer cityId=Integer.valueOf(getCityID);
List<City> list=cityService.getArea(cityId);
Gson json = new GsonBuilder().enableComplexMapKeySerialization().create();
result=json.toJson(list);
//log.info(result);
return SUCCESS;
}
struts配置文件代码
<!-- 这里result name默认为success -->
<result type="json">
<param name="root">result</param>
</result>
html代码
<tr>
<td align="right"><span class="star_red">*</span>任职城市 :</td>
<td>
<select class="post_select_short" id="province" name="province">
<!-- 回显的时候不需要这个提示 -->
<option selected value="">请选择</option>
</select>
<select class="post_select_short" id="city" name="city" >
</select>
<select class="post_select_short" id="area" name="area">
</select>
</td>
</tr>
js代码
(提交表单)
<script type="text/javascript">
/**
* 省市区的三级联动
*/
//获得省
$(document).ready(function(){
$.ajax({
url:"require_getProvince.action",
dataType:"json",//设置需要返回的数据类型
success:function(data){
var d = eval("("+data+")");
if(!data) return;
var html="";
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#province").append(html);
$("#province").change(function(){
$("#city").html("");
$("#area").html("");
getCity(city,area);
/* alert("*******************************");
alert($(this).val());
alert($("#province").val()); */
});
}
});
});
//获得市
function getCity(city,area){
$.ajax({
url:"require_getCity.action",
data:{provinceId:$("#province").val()},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var d = eval("("+data+")");
if(!data) return;
var html='';
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#city").append(html);
$("#city").change(function(){
$("#area").html('');
getArea(area);
});
$("#city").get(0).selectedIndex=0;//默认选择第一项
getArea(area);
}
});
}
//获得区
function getArea(area){
$.ajax({
url:"require_getArea.action",
data:{cityId:$("#city").val()},
dataType:"json",//设置需要返回的数据类型
success:function(data){
/* alert("可以获得数据!");
alert(data); */
var d = eval("("+data+")");
if(!data) return;
var html='';
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#area").append(html);
}
});
}
</script>
(数据回显)
<script type="text/javascript">
/**
* 省市区的三级联动 回显
*/
//获得省
$(document).ready(function(){
//获取后台传递的值
var city='${require.city}';
var citys=city.split(" ");
$.ajax({
url:"require_getProvince.action",
dataType:"json",//设置需要返回的数据类型
success:function(data){
var d = eval("("+data+")");
if(!data) return;
var html="";
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#province").append(html);
$("#province option").each(function(){
if($(this).text()==citys[0]){
$(this).attr("selected",true);
getCity(citys[1],citys[2]);
}
})
$("#province").change(function(){
$("#city").html("");
$("#area").html("");
getCity(null,null);//省份改动的话,重置市和区
});
}
});
});
//获得市
function getCity(city,area){
$.ajax({
url:"require_getCity.action",
data:{provinceId:$("#province").val()},
dataType:"json",//设置需要返回的数据类型
success:function(data){
var d = eval("("+data+")");
if(!data) return;
var html='';
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#city").append(html);
if(city!=null){
$("#city option").each(function(){
if($(this).text()==city){
$(this).attr("selected",true);
getArea(area);
}
})
}
$("#city").change(function(){
$("#area").html('');
getArea(null);//市改动的话,重置区
});
//$("#city").get(0).selectedIndex=0;//默认选择第一项
getArea(null);
}
});
}
//获得区
function getArea(area){
$.ajax({
url:"require_getArea.action",
data:{cityId:$("#city").val()},
dataType:"json",//设置需要返回的数据类型
success:function(data){
/* alert("可以获得数据!");
alert(data); */
var d = eval("("+data+")");
if(!data) return;
var html='';
for(var i in d){
html+='<option value='+d[i].id+'>'+d[i].atitle+'</option>';
}
$("#area").append(html);
if(area!=null){
$("#area option").each(function(){
if($(this).text()==area){
$(this).attr("selected",true);
}
})
}
}
});
}
</script>