ajax三级联动

例如选择地区

使用ajax异步刷新
在中使用onchange事件
在onchange事件中定义代码：

function guoJia() {
		var gid = document.getElementById("gj").value;//根据第一级的id获取对应的value值
		/* 创建ajax */
		var ajax = new XMLHttpRequest();
		/* 打开ajax */
		ajax.open("请求方式", "地址+gid +标识符+时间戳", true);
		/* 回调函数 */
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4&&ajax.status==200){
				var data = ajax.responseText; /* 响应数据 */
				//这次接的是对象集合，所以需要转换和循环
				var objs = eval("("+data+")");
				/* 把数据写在<select>标签中 */
				/* 先获取标签 */
				var citySel = document.getElementById("city");//根据第二级的id获取标签
				citySel.innerHTML="";	/* 清空之前查询的城市的值 */
				/* 开始循环 */
				for(var i = 0;i<objs.length;i++){
					var obj = objs[i];
					var cid=obj.cid;
					var cname = obj.cname;
					// 做成 一个一个的option 添加到 select 标签中
					// 第一个参数值 就是标签体  第二个参数值 就是 value 的属性值
					var option = new Option(cname, cid); //这里是个易错点，注意别填错了
					citySel.options.add(option);
				}
				chengShi();//这一步是为了在选择第一级时第三极也随着变化 不会造成第三级地址与第一和第二级地址不对应
			}
		};
		/* 发送 */
		ajax.send(null);
	}
function chengShi() {
		var cid = document.getElementById("city").value;
		/* 创建ajax */
		var ajax = new XMLHttpRequest();
		/* 打开ajax */
		ajax.open("GET", "OneServlet.do?flag=getQuByCid&cid="+cid+"&time="+new Date().getTime(), true);
		/* 回调函数 */
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4 && ajax.status==200){
				var data = ajax.responseText; /* 响应数据 */
				/* alert(data); */
				var objs = eval("("+data+")");
				/* 把数据写在<select>标签中 */
				/* 先获取标签 */
				var quSel = document.getElementById("qu");
				quSel.innerHTML="";	/* 清空之前查询的城市 */
				/* 开始循环 */
				for(var i = 0;i<objs.length;i++){
					var obj = objs[i];
					var qid=obj.qid;
					var qname = obj.qname;
					// 做成 一个一个的option 添加到 select 标签中
					// 第一个参数值 就是标签体  第二个参数值 就是 value 的属性值
					var option = new Option(qname, qid);
					quSel.options.add(option);
				}
			}
		};
		/* 发送 */
		ajax.send(null);
	}