ajax实现级联下拉菜单

ajax实现级联下拉菜单非常简单，下面是一个用ajax实现的省市级联的下拉菜单；

jsp中在<select>中添加onchange事件，触发该事件调用实现ajax的js：

<div>
	<form action="Pcs" method="post">
		所在省：<select name="pro" id="pro" onchange="chCity();">
				<option>--请选择--</option>
				<option value="beijing">北京市</option>
				<option value="shandong">山东省</option>
				<option value="hebei">河北省</option>
			 </select>      
		所在市：<select name="cit" id="cit">
				<option>--请选择--</option>
			 </select><br>

	</form>
</div>

正常的下拉菜单选项是在数据库取出来的，为了方便，我把省直接写在里面；所在市除了“选择”目前没有实际的option；

js中实现ajax:

function chCity(){
	var pro=document.all("pro").value;
	if(window.XmlHttpRequest){
		xmlHttpRequest=new XmlHttpRequest();
	}else{
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlHttpRequest.onreadystatechange=callBack;
	var url="Pcs";
	xmlHttpRequest.open("post",url,true);
	xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlHttpRequest.send("pro="+pro+"&timeStamp="+(new Date()).getTime());
}
//回调函数
function callBack(){

	if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
		var result=xmlHttpRequest.responseText;
		result=result.replace(/(^\s*)|(\s*$)/g, "");
		var city=result.split("|");

		var citySelect=document.all("cit");

		for(var i=citySelect.options.length-1;i>=0;i--){

			citySelect.options.remove(i);
		}
		for(var i=0;i<city.length;i++){
			var vn=city[i].split(",");
			var cvalue=vn[0];
			var cname=vn[1];
			var opt=document.createElement("option");
			citySelect.options.add(opt);
			opt.value=cvalue;
			opt.innerHTML=cname;
		}
	}
}

说明：

document.all("pro").value，根据name或id取值，这里用来获取select选项的value值；

把选择的option的value通过ajax提交到后台，先不看回调函数；

后台java程序：

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Pcs extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.equals("utf-8");
		response.setCharacterEncoding("utf-8");
		String pro=request.getParameter("pro");
		String cities="";
		if(pro.equalsIgnoreCase("beijing")){
			cities="haidian,海淀|changping,昌平|chaoyang,朝阳";
		}else if(pro.equalsIgnoreCase("shandong")){
			cities="jinan,济南|dezhou,德州|qingdao,青岛";
		}else if(pro.equalsIgnoreCase("hebei")){
			cities="shijiazhuang,石家庄|langfang,廊坊|xingtai,邢台";
		}else{
			cities=",--请选择--";
		}
		PrintWriter out=response.getWriter();
		out.print(cities);
		out.flush();
		out.close();

	}

}

说明：

正常的市是根据省在数据库查询出来的，为了方便我直接写在了字符串中；

在回调函数中我返回的是有一定格式的字符串，再在回调函数里用split分割；

注意最后一个else不能省掉，不然会在市里可能出现undefinded;

关于回调函数的说明：

var citySelect=document.all("cit");拿到市的select对象；

citySelect.options得到所有option对象，从后向前循环删掉option(因为这是我前一个选择出来的市，换了省市就得换)；

var city=result.split("|");获取所有市（option的value,option的文本子节点），进行遍历；

var vn=city[i].split(",");

var cvalue=vn[0];

var cname=vn[1]; 获取option的value和文本节点

创建元素节点 option，并为select加子节点；

给option加value和文本节点；