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

如图:  

注: 此为从数据库中查询的省市区数据, 如果需要不涉及后台的JS实现省市区三级联动, 可查看:

从腾讯网站中提取的纯JS省市区三级联动: http://blog.csdn.net/hjun01/article/details/38084977

html部分:

	所在省市区:
	
		
			--选择省份--
		
		
			--选择城市--
		
			--选择地区--
		
	

js部分:

省市区通过异步查询数据库获得. 其中，DISTRICT_ID为省/市/区的id，PARENT_ID为省/市/区的父id。例如：区的父id就是市的id，市的父id就是省的id。

var areaInfo = {};

$(function() {
	// 加载城市
	$("#province").change(function() {
		var curProvince = $(this).val();
		if (curProvince !== "") {
			areaInfo.loadCity(curProvince);
		} else {
			$("#city").empty().append('--请选择城市--');
			$("#county").empty().append('--请选择地区--');
		}
	});
	// 加载地区
	$("#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(
						''
								+ data[i].DISTRICTNAME + '');
			}
		});
	};
	// 加载城市
	areaInfo.loadCity = function(pid) {

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

		$("#county").empty().append('--请选择地区--');
		$("#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(
						''
								+ data[i].DISTRICTNAME + '');
			}
		});
	};
});

struts配置文件:

	
		text/html;charset=UTF-8
		jsonModelMap
	 

DistrictAction.java:

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; 
}

对应Ibatis的映射文件内容:

      
	    
		1 = 1
		
			AND t.district_level = #{level}
		
		
			AND t.PARENT_ID = #{pid}
		
		
		    AND t.PARENT_ID is null