省市區三級聯動下拉選框---具體功能實現

如圖:  

注: 此爲從數據庫中查詢的省市區數據, 如果需要不涉及後臺的JS實現省市區三級聯動, 可查看:

從騰訊網站中提取的純JS省市區三級聯動: http://blog.csdn.net/hjun01/article/details/38084977

html部分:

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

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('<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>');
			}
		});
	};
});

struts配置文件:

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

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的映射文件內容:

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