首页 > 代码库 > 三级联动 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