三级联动 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 = 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>