利用ajax实现下拉框二级联动，用原生js进行处理。

本文实现的ajax二级联动只是初学，数据也是在servlet中模拟的，主要是为了实现二级联动，也没有对代码进行提炼和整理，之后如果有时间，再用一些jq之类的方法把代码重构一遍，下面不说废话，先贴个简单的页面。

<form>
<select οnchange="change(this.value);">
<option>--请选择--</option>
<option value="js">江苏</option>
<option value="hb">湖北</option>
</select>

<select id="city">
<option>--请选择--</option>
</select>

</form>

一级菜单是省名，二级菜单是市名。

然后贴servlet模拟的数据代码

//设置编码解码格式

request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//获取请求资源路径
String uri = request.getRequestURI();
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));

if("/city".equals(action)){
 String value = request.getParameter("v");
   if("js".equals(value)){
out.print("nj:南京;sz:苏州;yz:扬州;tz:泰州");
}else if("hb".equals(value)){

out.print("wh:武汉;xy:襄阳");

}

}

最后贴上一级列表的onchange()方法

<script type="text/javascript" src="/ajax01/js/my.js"></script>
<script type="text/javascript">
function change(v){
//获取ajax对象
var xhr = getXhr();
//初始化
xhr.open('get','city.do?v='+v,true);
//注册监听器
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//获取服务器数据
var data = xhr.responseText;
//根据;拆分成不同的城市 
var citys = data.split(";");
//获取select根节点

var sl = document.getElementById("city");

                                        //清除之前的缓存，不然会出一点小小的BUG,可以尝试一下不清缓存，理解会深刻一点，我自己在这                                       //   蒙了好一会

sl.options.length = 0;
for(var i=0;i<citys.length;i++){
var ct = citys[i].split(":");
var op = document.createElement("option");
op.value= ct[0];
op.innerHTML = ct[1];

sl.appendChild(op);

                                                  //下面注释的方法我在网上看的，不知道怎么用不了，就注释掉了，谁能告诉我为什么。。。

//sl.append("<option value="+ct[0]+">"+ct[1]+"</option>");
}//end of for
}//end of if
}//end of if
};//end of function
//发送请求
xhr.send(null);
}
</script>