首页 > 代码库 > 三级联动 City.jsp

三级联动 City.jsp

<%@ 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 = http://www.mamicode.com/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 = http://www.mamicode.com/ss[0]; //设置选项的值

}           

}         

}

</script>

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

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

<option value="http://www.mamicode.com/hn">河南</option>  

<option value="http://www.mamicode.com/sx">陕西</option>  

<option value="http://www.mamicode.com/ah">安徽</option>  

<option value="http://www.mamicode.com/bj">北京</option>  

<option value="http://www.mamicode.com/cq">重庆</option>  

<option value="http://www.mamicode.com/fj">福建</option>  

<option value="http://www.mamicode.com/gs">甘肃</option>  

<option value="http://www.mamicode.com/gd">广东</option>  

<option value="http://www.mamicode.com/gx">广西</option>  

<option value="http://www.mamicode.com/gz">贵州</option>  

<option value="http://www.mamicode.com/hn">海南</option>  

<option value="http://www.mamicode.com/hb">河北</option>  

<option value="http://www.mamicode.com/hlj">黑龙江</option>  

<option value="http://www.mamicode.com/hb">湖北</option>  

<option value="http://www.mamicode.com/hn">湖南</option>  

<option value="http://www.mamicode.com/js">江苏</option>  

<option value="http://www.mamicode.com/jx">江西</option>  

<option value="http://www.mamicode.com/jl">吉林</option>  

<option value="http://www.mamicode.com/ln">辽宁</option>

 <option value="http://www.mamicode.com/nx">宁夏</option>

 <option value="http://www.mamicode.com/nmg">内蒙古</option>  

<option value="http://www.mamicode.com/qh">青海</option>  

<option value="http://www.mamicode.com/sh">上海</option>  

<option value="http://www.mamicode.com/sx">山西</option>  

<option value="http://www.mamicode.com/sd">山东</option>  

<option value="http://www.mamicode.com/sc">四川</option>  

<option value="http://www.mamicode.com/tj">天津</option>  

<option value="http://www.mamicode.com/xz">西藏</option>  

<option value="http://www.mamicode.com/xj">新疆</option>  

<option value="http://www.mamicode.com/yn">云南</option>  

<option value="http://www.mamicode.com/zj">浙江</option>  

<option value="http://www.mamicode.com/tw">台湾</option>  

<option value="http://www.mamicode.com/xg">香港</option>  

<option value="http://www.mamicode.com/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