AJAX完成三级级下拉联动【省份-城市-区域】

AJAX应用案例--基于MysqL，以POST方式，用DOM对象，完成三级级下拉联动【省份-城市-区域】，效果图如下：

省份城市区域

[html]view plaincopy 
   
 <%@pagelanguage="java"pageEncoding="UTF-8"%>@H_301_60@ 
  
 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">@H_301_60@ 
  
<html bodyselectid="provinceID"option>请选择省份</optionvalue="1">广东optionvalue="2">湖南selectselectid="cityID">请选择城市selectid="areaID">请选择区域scripttype="text/javascript" functioncreateAJAX(){@H_301_60@ 
  
 varajax=null;@H_301_60@ 
  
 try{@H_301_60@ 
  
 ajax=newActiveXObject("microsoft.xmlhttp");@H_301_60@ 
  
 }catch(e){@H_301_60@ 
  
 try{@H_301_60@ 
  
 ajax=newXMLHttpRequest();@H_301_60@ 
  
 }catch(e){@H_301_60@ 
  
 alert("请更换浏览器");@H_301_60@ 
  
 }@H_301_60@ 
  
 }@H_301_60@ 
  
 returnajax;@H_301_60@ 
  
script //创建AJAX引擎对象@H_301_60@ 
  
 varajax=createAJAX();@H_301_60@ 
  
 //产生事件@H_301_60@ 
  
 document.getElementById("provinceID").onchange=function(){@H_301_60@ 
  
 //再次选择省份时，清空city下拉框@H_301_60@ 
  
 //定位city下拉框@H_301_60@ 
  
 varcitySelectElement=document.getElementById("cityID");@H_301_60@ 
  
 varoptionElementArray=citySelectElement.options;@H_301_60@ 
  
 varsize=optionElementArray.length;@H_301_60@ 
  
 if(size>1){@H_301_60@ 
  
 for(vari=size-1;i>0;i--){@H_301_60@ 
  
 citySelectElement.removeChild(optionElementArray[i]);@H_301_60@ 
  
 @H_301_60@ 
  
 //再次选择省份时，清空area下拉框@H_301_60@ 
  
 //定位area下拉框@H_301_60@ 
  
 varareaSelectElement=document.getElementById("areaID");@H_301_60@ 
  
 varareaOptionArray=areaSelectElement.options;@H_301_60@ 
  
 varsize=areaOptionArray.length;@H_301_60@ 
  
 if(size>1){@H_301_60@ 
  
 for(vari=size-1;i>0;i--){@H_301_60@ 
  
 areaSelectElement.removeChild(areaOptionArray[i]);@H_301_60@ 
  
 @H_301_60@ 
  
 //获取选中省份的编号@H_301_60@ 
  
 varoptionElement=this[this.selectedIndex];@H_301_60@ 
  
 varprovinceId=optionElement.value;@H_301_60@ 
  
 //准备发送请求@H_301_60@ 
  
 varmethod="POST";@H_301_60@ 
  
 varurl="${pageContext.request.contextPath}/ProvinceCityAreaServlet?id="+newDate().getTime();@H_301_60@ 
  
 ajax.open(method,url);@H_301_60@ 
  
 //设置以POST表单形式发送，自动将请求体的中文进行编码@H_301_60@ 
  
 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");@H_301_60@ 
  
 //真正发送请求体中的数据@H_301_60@ 
  
 varcontent="provinceId="+provinceId+"&method=provinceToCity";@H_301_60@ 
  
 ajax.send(content);@H_301_60@ 
  
 //监听服务端的响应@H_301_60@ 
  
 ajax.onreadystatechange=function(){@H_301_60@ 
  
 if(ajax.readyState==4){@H_301_60@ 
  
 if(ajax.status==200){@H_301_60@ 
  
 varjsonJavaString=ajax.responseText;@H_301_60@ 
  
 //jsonJavaString=[{"name":"长沙"},{"name":"湘潭"},{"name":"株洲"}]@H_301_60@ 
  
 varjson=eval("("+jsonJavaString+")");@H_301_60@ 
  
 //返回值，就是可解析并执行的JavaScript代码@H_301_60@ 
  
 //json=[{"name":"长沙"},{"name":"株洲"}]@H_301_60@ 
  
 varsize=json.length;@H_301_60@ 
  
 //迭代@H_301_60@ 
  
 for(vari=0;isize;i++){@H_301_60@ 
  
 varcity=json[i].name;@H_301_60@ 
  
 varcid=json[i].id;@H_301_60@ 
  
 //创建option节点@H_301_60@ 
  
 varoptionElement=document.createElement("option");@H_301_60@ 
  
 //设置option节点之间的内容@H_301_60@ 
  
 optionElement.innerHTML=city;@H_301_60@ 
  
 optionElement.setAttribute("value",cid);@H_301_60@ 
  
 //添加到city下拉框中@H_301_60@ 
  
 citySelectElement.appendChild(optionElement);@H_301_60@ 
  
 };@H_301_60@ 
  
 };@H_301_60@ 
  
 //===============================cityToArea==================================================@H_301_60@ 
  
 //产生事件@H_301_60@ 
  
 document.getElementById("cityID").onchange=function(){@H_301_60@ 
  
 //再次选择城市时，定位area下拉框，清空area下拉框@H_301_60@ 
  
 //获取选中城市的编号@H_301_60@ 
  
 varcid=optionElement.value;@H_301_60@ 
  
 varcontent="cid="+cid+"&method=cityToArea";@H_301_60@ 
  
 vararea=json[i].name;@H_301_60@ 
  
 //varcid=json[i].name;@H_301_60@ 
  
 optionElement.innerHTML=area;@H_301_60@ 
  
 //optionElement.setAttribute("id",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px"> areaSelectElement.appendChild(optionElement);@H_301_60@ 
  
>@H_301_60@

servlet代码：

[java]copy 
   

AJAX完成三级级下拉联动【省份-城市-区域】

猜你在找的Ajax相关文章