省市区三级联动下拉选框---具体功能实现

<tr>
<td style="width: 69px; ">所在省市区:</td>
<td>
<select id="province" style="width: 90px; ">
<option value="">--选择省份--</option>
</select>
<select id="city" style="width: 90px; ">
<option value="">--选择城市--</option>
</select><select id="county" style="width: 90px; ">
<option value="">--选择地区--</option>
</select>
</td>
</tr>

var areaInfo = {};

$(function() {
// 加载城市
$("#province").change(function() {
var curProvince = $(this).val();
if (curProvince !== "") {
areaInfo.loadCity(curProvince);
} else {
$("#city").empty().append('<option value="">--请选择城市--</option>');
$("#county").empty().append('<option value="">--请选择地区--</option>');
}
});
// 加载地区
$("#city").change(function() {
var curCity = $(this).val(); //
if (curCity !== "") {
areaInfo.loadCounty(curCity);
}
});
//-----------------------------------------------------------
// 加载省份
areaInfo.loadProvince = function() {
HttpPost("/district/getAreadistrict.do", {
level : 1
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#province").append(
'<option value=' + data[i].DISTRICTID + '>'
+ data[i].DISTRICTNAME + '</option>');
}
});
};
// 加载城市
areaInfo.loadCity = function(pid) {

$("#city").empty().append('<option value="">--请选择城市--</option>');
$("#county").empty().append('<option value="">--请选择地区--</option>');
HttpPost("/district/getAreadistrict.do", {
level : 2,
parentID : pid
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#city").append(
'<option value=' + data[i].DISTRICTID + '>'
+ data[i].DISTRICTNAME + '</option>');
}
});
};
// 加载地区
areaInfo.loadCounty = function(cid) {

$("#county").empty().append('<option value="">--请选择地区--</option>');
$("#county option[value='']").attr("selected", true);
HttpPost("/district/getAreadistrict.do", {
level : 3,
parentID : cid
}, function(data) {
data = data.data;
for ( var i = 0; i < data.length; i++) {
$("#county").append(
'<option value=' + data[i].DISTRICTID + '>'
+ data[i].DISTRICTNAME + '</option>');
}
});
};
});

<action name="getAreadistrict" method="getAreadistrict"  class="back.webapp.action.area.DistrictAction">
<result name="success" type="json">
<param name="contentType">text/html;charset=UTF-8</param>
<param name="jsonModel">jsonModelMap</param>
</result>
</action>

public String getAreadistrict(){
String level = this.request.getParameter("level");
String parentID = this.request.getParameter("pid");

List areadistrictJson =districtService.getAreadistrictJson(level,parentID);
HashMap resultMap = new HashMap();
resultMap.put("data", areadistrictJson);
setJsonModelMap(resultMap);
return SUCCESS;
}

<select id="getAreadistrictList"  resultType="java.util.HashMap">
<![CDATA[select t.id ,t.district_name ,t.district_code
from MG_UC_DISTRICT  t
]]>
<where>
1 = 1
<if test="level != null">
AND t.district_level = #{level}
</if>
<if test="pid != null">
AND t.PARENT_ID = #{pid}
</if>
<if test="pid = null">
AND t.PARENT_ID is null
</if>
</where>
</select>