三级联动 City.jsp

标签：style   http   io   os   ar   java   for   数据   sp   

<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%> <script language="JavaScript">         var req = null;        

function test() {                

var province = document.all("province").value;                

req = new ActiveXObject("Microsoft.XMLHTTP");                 //设置属性，当后台处理完成后，回来调用myDeal方法。              

req.onreadystatechange = myDeal;                 //发出请求               

req.open("GET", "city1.jsp?province=" + province, "false");              

req.send(null);        

}        

function myDeal() {                

　　if (req.readyState == 4) {                         //接收服务端返回的数据                        

var ret = req.responseText;                         //处理数据                         //alert(ret);                        

var obj = document.all("city");                        

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

　　obj.options.remove(i); //从后往前删除                        

}                        

var ops = ret.split("|");                        

for (var i = 0; i < ops.length; i++) {                                

var op = ops[i];                                

var ss = op.split(",");                                

var oOption = document.createElement("OPTION"); //创建一个OPTION节点                                

obj.options.add(oOption);    //将节点加入city选项中                                

oOption.innerText = ss[1];    //设置选择展示的信息                                

oOption.value = ss[0];         //设置选项的值                        

}                         //checkCountry(ss[0]);                

}        

}                 

function country() {                     

var city = document.all("city").value;                      

req = new ActiveXObject("Microsoft.XMLHTTP");             //设置属性，当后台处理完成后，回来调用myDeal方法。            

req.onreadystatechange = myCountry;             //发出请求            

req.open("GET", "city2.jsp?city="+city, "false");            

req.send(null);                   

}                  

function myCountry() {           //alert(1);          

if (req.readyState == 4) {                  //接收服务端返回的数据                 

var ret = req.responseText;                  //处理数据                                

var obj = document.all("country");                 

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

obj.options.remove(i); //从后往前删除                 

}                 

var ops = ret.split("|");                  //alert(ret);                 

for (var i = 0; i < ops.length; i++) {                         

var op = ops[i];                         

var ss = op.split(",");                         

var oOption = document.createElement("OPTION"); //创建一个OPTION节点                         

obj.options.add(oOption);    //将节点加入city选项中                         

oOption.innerText = ss[1];    //设置选择展示的信息                         

oOption.value = ss[0];         //设置选项的值                 

}           

}         

}

</script>

省份： <select id="province" name="province" onchange="test();">  

<option value="">请选择</option>  

<option value="hn">河南</option>  

<option value="sx">陕西</option>  

<option value="ah">安徽</option>  

<option value="bj">北京</option>  

<option value="cq">重庆</option>  

<option value="fj">福建</option>  

<option value="gs">甘肃</option>  

<option value="gd">广东</option>  

<option value="gx">广西</option>  

<option value="gz">贵州</option>  

<option value="hn">海南</option>  

<option value="hb">河北</option>  

<option value="hlj">黑龙江</option>  

<option value="hb">湖北</option>  

<option value="hn">湖南</option>  

<option value="js">江苏</option>  

<option value="jx">江西</option>  

<option value="jl">吉林</option>  

<option value="ln">辽宁</option>

 <option value="nx">宁夏</option>

 <option value="nmg">内蒙古</option>  

<option value="qh">青海</option>  

<option value="sh">上海</option>  

<option value="sx">山西</option>  

<option value="sd">山东</option>  

<option value="sc">四川</option>  

<option value="tj">天津</option>  

<option value="xz">西藏</option>  

<option value="xj">新疆</option>  

<option value="yn">云南</option>  

<option value="zj">浙江</option>  

<option value="tw">台湾</option>  

<option value="xg">香港</option>  

<option value="am">澳门</option>

</select> <br>

城市： <select id="city" name="city" onchange="country();">  

<option value="">请选择</option>

</select> <br>

县镇： <select id="country" name="country">  <option value="">请选择</option>

</select>

三级联动 City.jsp

标签：style   http   io   os   ar   java   for   数据   sp   

原文地址：http://www.cnblogs.com/liyong0125/p/3998625.html