《施用Struts2+Jquery实现三级联动》的补充

下面的代码也是实现“三级联动”的，只不过是采用传统的Ajax+DOM，而不是Jquery技术实现的。

算是《使用Struts2+Jquery实现三级联动》的补充吧。

当然，代码有点繁琐。呵呵，还是用Jquery实现简单些。

//加载事件
window.onload = function () {

	//处理省份
	var xmlHttp = createXmlHttpRequest();
	xmlHttp.onreadystatechange = function () {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200 || xmlHttp.status == 304) {
				 //得到返回的数据
				var data = xmlHttp.responseText; 
				//将返回的数据转换为JSON
				var jsonObj = eval("(" + data + ")");
				var provinceElement = document.getElementById("province");
				//处理JSON
				for (var i = 0; i < jsonObj.length; i++) {
					var optionElement = document.createElement("option");
					optionElement.setAttribute("value", jsonObj[i].pid);
					var optionTextNode = document.createTextNode(jsonObj[i].pname);
					optionElement.appendChild(optionTextNode);
					provinceElement.appendChild(optionElement);
				}
			}
		}
	};
	xmlHttp.open("post", "linkageAction_getProvince.action", true);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send(null);
	
	
	//处理城市
	document.getElementById("province").onchange = function () {
		//得到省份的id
		var pid = this.value; //var pid=document.getElementById("province").value;
		var xmlHttp = createXmlHttpRequest();
		xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {
					//清空城市选项
					var cityElement = document.getElementById("city");
					var cityOptions = cityElement.getElementsByTagName("option");
					for (var i = cityElement.length - 1; i > 0; i--) {
						cityElement.removeChild(cityOptions[i]);
					}
					//清空乡镇选项
					var townElement = document.getElementById("town");
					var townOptions = townElement.getElementsByTagName("option");
					for (var i = townElement.length - 1; i > 0; i--) {
						townElement.removeChild(townOptions[i]);
					}
					//得到返回的数据
					var data = xmlHttp.responseText;
					//将返回的数据转换为JSON
					var jsonObj = eval("(" + data + ")");
					//处理JSON
					for (var i = 0; i < jsonObj.length; i++) {
						var optionElement = document.createElement("option");
						optionElement.setAttribute("value", jsonObj[i].cid);
						var optionTextNode = document.createTextNode(jsonObj[i].cname);
						optionElement.appendChild(optionTextNode);
						cityElement.appendChild(optionElement);
					}
				}
			}
		};
		xmlHttp.open("post", "linkageAction_getCityByPid.action", true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send("pid=" + pid);
	};
	
	
	//处理乡镇
	document.getElementById("city").onchange = function () {
		//得到城市的id
		var cid = this.value;  //var cid=document.getElementById("city").value;
		var xmlHttp = createXmlHttpRequest();
		xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState == 4) {
				if (xmlHttp.status == 200 || xmlHttp.status == 304) {
					//清空乡镇选项
					var townElement = document.getElementById("town");
					var townOptions = townElement.getElementsByTagName("option");
					for (var i = townElement.length - 1; i > 0; i--) {
						townElement.removeChild(townOptions[i]);
					}
					//得到返回的数据
					var data = xmlHttp.responseText;
					//将返回的数据转换为JSON
					var jsonObj = eval("(" + data + ")");
					//处理JSON
					for (var i = 0; i < jsonObj.length; i++) {
						var optionElement = document.createElement("option");
						optionElement.setAttribute("value", jsonObj[i].tid);
						var optionTextNode = document.createTextNode(jsonObj[i].tname);
						optionElement.appendChild(optionTextNode);
						townElement.appendChild(optionElement);
					}
				}
			}
		};
		xmlHttp.open("post", "linkageAction_getTownByCid", true);
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xmlHttp.send("cid=" + cid);
	};
};




//创建XmlHttpRequest对象
function createXmlHttpRequest() {
	var xmlHttp;
	try {    //Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch (e) {
		try {    //Internet Explorer
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {
			}
		}
	}
	return xmlHttp;
}

?

?

?