這只是個簡單版的省市聯動的頁面：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>省份-城市-區域三級聯動</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>
<select id="provinceID" style="width:111px">
<option>選擇省份</option>
<option>湖北</option>
<option>湖南</option>
<option>廣東</option>
</select>
<select id="cityID" style="width:111px">
<option>選擇城市</option>
</select>
<select id="areaID" style="width:111px">
<option>選擇區域</option>
</select>
<!-- 省份->城市 -->
<script type="text/javascript">
document.getElementById("provinceID").onchange = function(){
//清空城市下拉框
var cityElement = document.getElementById("cityID");
cityElement.options.length = 1;
//清空區域下拉框
var areaElement = document.getElementById("areaID");
areaElement.options.length = 1;
var province = this[this.selectedIndex].innerHTML;
if("選擇省份" != province){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+new Date().getTime();
ajax.open(method,url);
//NO3)
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//NO4)
var content = "bean.province=" + province;
ajax.send(content);
//-------------------------------------------等待
//NO5
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO6)返回JAVA格式的JSON文本
var jsonJAVA = ajax.responseText;
//jsonJAVA所代表的是java格式的json文本，是不能直接被js執行的
//解決方案：將java格式的json文本，轉成js格式的json文本
var jsonJS = eval("("+jsonJAVA+")");
var array = jsonJS.cityList;
var size = array.length;
for(var i=0;i<size;i++){
var city = array[i];
var option = document.createElement("option");
option.innerHTML = city;
cityElement.appendChild(option);
}
}
}
}
}
}
</script>
<!-- 城市->區域 -->
<script type="text/javascript">
document.getElementById("cityID").onchange = function(){
var areaElement = document.getElementById("areaID");
areaElement.options.length = 1;
var city = this[this.selectedIndex].innerHTML;
if("選擇城市" != city){
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/findAreaByCityRequest?time="+new Date().getTime();
ajax.open(method,url);
//NO3)
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//NO4)
var content = "bean.city=" + city;
ajax.send(content);
//------------------------------------------等待
//NO5)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO6)
var jsonJAVA = ajax.responseText;
var jsonJS = eval("("+jsonJAVA+")");
var array = jsonJS.areaList;
var size = array.length;
for(var i=0;i<size;i++){
var area = array[i];
var option = document.createElement("option");
option.innerHTML = area;
areaElement.appendChild(option);
}
}
}
}
}
}
</script>
</body>
</html>
這裏注意：使用js的eval()函數便可有完美的修改，講java的json轉變成js可識別的json，這裏一定要注意寫法。固定寫法要加上一個“（）”
var jsonJS = eval("("+jsonJAVA+")");