一 province.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" language="javaScript">
var xmlHttp = false; //全局变量，用于记录XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) { //Internet Explorer时，创建XMLHttpRequest对象的方法
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//旧版本的Internet Explorer，创建XMLHttpRequest对象
} catch(e) {
window.alert("创建XMLHttpRequest对象错误"+e);
}
}
} else if(window.XMLHttpRequest) { //mozilla时，创建XMLHttpRequest对象的方法
xmlHttp = new XMLHttpRequest();
}
if(!(xmlHttp)) { //未成功创建XMLHttpRequest对象
window.alert("创建XMLHttpRequest对象异常！");
}
}
//下拉列表项改变时的操作
function proChange(objVal) {
createXMLHttpRequest(); //创建XMLHttpRequest对象
document.getElementById("city").length = 1; //根据ID获取指定元素，并赋值
xmlHttp.onreadystatechange = cityList; //指定onreadystatechange处理函数
var url="CityByXMLServlet?province="+objVal; //请求的URL地址
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}
function cityList() { //onreadystatechange的处理函数
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
parseXML(xmlHttp.responseXML); //解析服务器返回的XML数据
}
}
}
//解析xml信息，以添加地市
function parseXML(xmlDoc) {
var len = xmlDoc.getElementsByTagName("city");
//获取XML数据中所有的“city”元素对象集合
var _citySel = document.getElementById("city"); //根据ID获取页面中的select元素
for(var i=0;i<len.length;i++) { //遍历XML数据并给select元素添加选项
var opt = document.createElement("OPTION"); //创建option对象
opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新创建元素的text属性值
opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新创建元素的value属性值
_citySel.add(opt); //为select元素添加option
}
}
</script>
<title>动态加载组合框</title>
</head>
<body>
<table align="center" border=1 width="320">
<tr>
<td>省份：</td>
<td>
<select id="province" onChange="proChange(this.value);" style="width:85">
<option value="gd">广东</option>
<option value="gx">广西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
<option value="ah">安徽</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city" style="width:85">
<option value="">--请选择--</option>
</select>
</td>
</tr>
</table>
</body>
</html>
