java jsp js 实现地区表 三级联动，并修改时数据回显

js:方法

//下一级
function areaNext(id){
if($("#area"+id).val() == 0){
document.getElementById("area1"+id).options[0].selected=true;
document.getElementById("area2"+id).options[0].selected=true;
document.getElementById("area1"+id).length=1;
document.getElementById("area2"+id).length=1;
}else{
$.ajax({
type: 'post',
url: "/LovePatPrint/web/member!getCity?ProvinceId=" + $("#area"+id).val(),
success: function(text) {
$("#area1"+id).html(text);
document.getElementById("area1"+id).options[1].selected=true;
$.ajax({
type: 'post',
url: "/LovePatPrint/web/member!getDistrict?cityId=" + $("#area1"+id).val(),
success:function(text){
$("#area2"+id).html(text);
document.getElementById("area2"+id).options[1].selected=true;
},
error: function(xx) {
alert("网络异常");
}
});
},
error: function(xx) {
alert("网络异常");
}
});
}
}
//三级
function threeNext(id){
if($("#area1"+id).val() == 0){
document.getElementById("area2"+id).options[0].selected=true;
document.getElementById("area2"+id).length=1;
}else{
$.ajax({
type: 'post',
url: "/LovePatPrint/web/member!getDistrict?cityId=" + $("#area1"+id).val(),
success: function(text) {
$("#area2"+id).html(text);
document.getElementById("area2"+id).options[1].selected=true;
},
error: function(xx) {
alert("网络异常");
}
});
}
}

jsp:方法

<pre name="code" class="html"><select id="area11" name="area11" onchange="areaNext(11);">

<option value="0">--请选择--</option>
<s:iterator value="areaList" var="al">
<option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
</s:iterator>
</select>
<script>
document.getElementById("area11").value = ${one };
</script>
<select id="area111" name="area111" onchange="threeNext(11);">

<option value="0">--请选择--</option>
<s:iterator value="areaList2" var="al">
<option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
</s:iterator>

</select>
<script>
document.getElementById("area111").value = ${two }
</script>
<select id="area211" name="area211">

<option value="0">--请选择--</option>
<s:iterator value="areaList3" var="al">
<option value="<s:property value="#al.countryAreaId"/>"><s:property value="#al.areaName"/></option>
</s:iterator>

</select>
<script>
document.getElementById("area211").value = ${three }
<span style="font-family: Arial, Helvetica, sans-serif;"></script></span>

java：代码实现

/**
* 地域级别验证
* @author lmc
* @time 2014-6-20 13:17:04
*/
public void levelCheck(int id){
String areaHql="from Area where countryAreaId="+id;
areaPojo=areaService.getArea(areaHql);
if(areaPojo.getParentId() == 0){
//顶级ID

String hql=" select *  from area where parent_id=0";
areaList = areaService.getAreaList(hql);
one = areaPojo.getCountryAreaId();
}else{
//判断是三级或是二级
String hql="from Area where countryAreaId="+areaPojo.getParentId();
areaPojo2 = areaService.getArea(hql);
if(areaPojo2.getParentId() == 0){
//二级ID

//顶级集合
areaList = areaService.getAreaList("select *  from area where parent_id=0");
one = areaPojo2.getCountryAreaId();
//二级集合
areaList2 =  areaService.getAreaList("select *  from area where parent_id="+one);
two = areaPojo.getCountryAreaId();
}else{
//三级ID

//顶级集合
areaList = areaService.getAreaList("select *  from area where parent_id=0");
one = areaPojo2.getParentId();
//二级集合
areaList2 =  areaService.getAreaList("select *  from area where parent_id="+one);
two = areaPojo.getParentId();
//三级集合
areaList3 =  areaService.getAreaList("select *  from area where parent_id="+two);
three = id;
}
}

}