jquery ajax(2)—–获取省市县/区三级联动(1)
1.jsp 页面的jquery ajax:注意要引入jquery.min.js
<script>
$(function () {
$("#provSelect").change(function () {
var selValue=$("select option:selected").val();
$("#citySelect option:not(:first)").remove();
$("#distSelect option:not(:first)").remove();
$.ajax({
url:"/region/city",
type:"post",
dataType:"text",
data:"provinceId="+selValue,
success:function (data) {
var obj=eval(data);
$.each(obj,function (index,item) {
// alert(obj[index].id);
$("#citySelect").append("<option value='"+obj[index].id+"'>"
+obj[index].regionName+"</option>");
})
}
})
})
$("#citySelect").change(function () {
var cityId=$("#citySelect option:selected").val();
alert("cityId=="+cityId);
$("#distSelect option:not(:first)").remove();
$.ajax({
url:"/region/district",
type:"post",
dataType:"text",
data:"cityId="+cityId,
success:function (data) {
var districtJson=eval(data);
$.each(districtJson,function (index,item) {
$("#distSelect").append("<option>"+
districtJson[index].regionName+"</option>");
})
}
})
})
})
</script>
2.jsp页面如下:
<li>
<select id="provSelect" class="on">
<option name="prov_9999" value="9999">请选择省份...</option>
<c:forEach items="${province}" var="pro">
<option name="prov_34" id="pro_id" value="${pro.id}">${pro.regionName}</option>
</c:forEach>
</select>
</li>
<li id="citySelectArea" style="">
<select id="citySelect">
<option selected="selected" name="city_244" value="244">请选择城市</option>
<%--<c:forEach items="${city}" var="city">
<option name="city_245" value="245">${city.regionType}</option>
</c:forEach>--%>
</select>
</li>
<li id="distSelectArea">
<select id="distSelect">
<option name="dist_9999" value="9999" >请选择地区/县</option>
</select>
</li>
3.springMVC 后台controller 关键加@ResponseBody:
/*获取省份*/
@RequestMapping("/province")
@ResponseBody
public void findProvince(Model model){
int regionType=1;
List<Region> regionList=regionService.findByParentId(1);
model.addAttribute("region",regionList);
}
/*(2)获取城市*/
@RequestMapping("/city")
@ResponseBody
public List<Region> findCity(@Param("city")String city, Model model){
// int regionType=3;
System.out.println("controller city=="+city);
int regionType=Integer.parseInt(city);
List<Region> regionList=regionService.findByParentId(regionType);
model.addAttribute("city",regionList);
return regionList;
}
/*获取区/县*/
@RequestMapping("/district")
@ResponseBody
public List<Region> findDistrict(@Param("cityId")String cityId, Model model){
int regionType=Integer.parseInt(cityId);
List<Region> regionList=regionService.findByParentId(regionType);
return regionList;
}
4.Region实体类:
@Entity
@Table(name = "region")
public class Region {
@Id
@GeneratedValue
@Column(name = "region_id")
private long id;
@Column(name = "parent_id")
private int parentId;
@Column(name = "region_name")
private String regionName;
@Column(name = "region_type")
private int regionType;
setter、getter此处省略...
}