省份-市级-区级 级联 Ajax JSON

省份-市级-区级 级联  Ajax JSON

技术为JQuery+Ajax+JSON， 当用户选定省份后，级联出市，选出市后，级联出区。原理为：JQuery检测出下拉列表变化时，通过Ajax调用后台数据库，后台传回JSON，动态添加<option></option>并且赋值到下一级中。注意编码问题为了方便统一UTF-8。

js关键代码：

function convertURL(url) { //时间戳
	var timstamp = (new Date()).valueOf();
	if (url.indexOf("?") >= 0) {
		url = url + "&t=" + timstamp;
	} else {
		url = url + "?t=" + timstamp;
	}
	return url;
}

$().ready(function() {// JQUERY市级联
			$("#Province").change(
					function() {
						$("#City").html(
								'<option selected="selected">--全部--</option>');
						var id = document.getElementById("Province").value;

						$.getJSON(
								convertURL("addprochange.action?proid=" + id),
								function(data) {
									$.each(data.city, function(id, name) {
										$("#City").append(
												'<option value='
														+ data.city[id].id
														+ '>'
														+ data.city[id].name
														+ '</option>');
									});

								});
					});

		});

$().ready(function() {// JQUERY区级联
		$("#City").change(function() {$("#Direct").html('<option selected="selected">--全部--</option>');
		var id = document.getElementById("City").value;
		$("#Show tr:gt(2)").empty();
		$.getJSON(convertURL("addcitchange.action?proid="+ id),
		function(data) {$.each(
						data.direct,
						function(id,name) {
							$("#Show").append('<tr><td><input id=old name=old type=checkbox value='
									+ data.direct[id].id+ '></td>'+ '<td>'
									+ $("#Province").find("option:selected").text()
									+ '</td>'+ '<td>'
									+ $("#City").find("option:selected").text()
									+ '</td>'+ '<td>'+ data.direct[id].name
									+ '</td></tr>');
							});
					});
			});
});

Java核心代码，这里采用了JSONjar包，自动封装成JSON数据

	public void adpchange() throws MyException {// 省份改变，返回List<City>
		try {
			if (proid != null)
				listcity = actrl.findCity(Integer.parseInt(proid));
			else
				listcity = actrl.findAllCity();
			ActionContext con = ActionContext.getContext();
			HttpServletResponse resp = (HttpServletResponse) con
					.get(ServletActionContext.HTTP_RESPONSE);
			resp.setCharacterEncoding("UTF-8");//注意编码
			JSONObject jsonObject = new JSONObject();//JSON封装
			jsonObject.put("city", listcity);
			resp.getWriter().write(jsonObject.toString());
			jsonObject.clear();
		} catch (Exception e) {
			log.error("地址返回错误");
			throw new MyException("地址返回错误");
		}
	}

返回List<Direct> 类似

	public void adcchange() throws MyException {// 城市改变，返回List<Direct>
		try {
			if (proid != null)
				listdirect = actrl.findDirect(Integer.parseInt(proid));
			else
				listdirect = actrl.findAllDirect();
			ActionContext con = ActionContext.getContext();
			HttpServletResponse resp = (HttpServletResponse) con
					.get(ServletActionContext.HTTP_RESPONSE);
			resp.setCharacterEncoding("UTF-8");
			JSONObject jsonObject = new JSONObject();
			jsonObject.put("direct", listdirect);
			resp.getWriter().write(jsonObject.toString());
			jsonObject.clear();
		} catch (Exception e) {
			log.error("地址返回错误");
			throw new MyException("地址返回错误");
		}
	}

度娘上基本都是讲地址写死到JS中，个人感觉这样维护起来比较麻烦。而且有些冷门地址几乎不需要，不如写到数据库中灵活一些。

大工搞成，show一下：

1.

2.

3.