示例:
源码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
/*
注:
1 : 示例中不支持谷歌浏览器解析
2 : 清空市级所有列表时,要永远根据数组的第一个下标清空下拉列表数组
例如:
for (var i = 0; i < cityLength; i++) {
city.removeChild(cityItems[0]);
}
*/
window.onload = function () {
//选择省份后,onchange事件
document.getElementById("province").onchange = function () {
//解析XML
var xmlDoc = parseXML("city.xml");
//通过xmlDoc解析XML中province标签,返回值为数组
var provinces = xmlDoc.getElementsByTagName("province");
//获取下拉列表选中的值
var selectValue = this.value;
//获取市级的下拉列表
var city = document.getElementById("city");
//获取市级的所有列表
var cityItems = city.getElementsByTagName("option");
//获取市级列表的长度
var cityLength = cityItems.length;
//清空市级的所有列表
for (var i = 0; i < cityLength; i++) {
//注:数组长度下标一定要写为0!! 每删除一个元素,下一个元素就成会为第一个
city.removeChild(cityItems[0]);
}
//在HTML中新建一个<option>下拉列表
var option = document.createElement("option");
//在HTML中新建一个文本节点
var text = document.createTextNode("请选择市区");
//在下拉列表中添加节点
option.appendChild(text);
city.appendChild(option);
//遍历XML子节点并在HTML添加对应的市级
for (var i = 0; i < provinces.length; i++) {
//获取XML单个节点
var province = provinces[i];
//获取XML中<province>的name对应的值
var provinceName = province.getAttribute("name");
if (selectValue==provinceName) {
//alert(selectValue+"-------"+provinceName);
//获取该省的所有市,返回值为数组
var citys = province.getElementsByTagName("city");
//alert("citys.length="+citys.length);
for (var i = 0; i < citys.length; i++) {
//获取XML中每个<city>的文本内容
var text = citys[i].childNodes[0].nodeValue;
//在HTML中新建一个<option>下拉列表
var optionElement = document.createElement("option");
//在HTML中新建一个文本节点
var textElement = document.createTextNode(text);
//在下拉列表中添加节点
optionElement.appendChild(textElement);
city.appendChild(optionElement);
}
}
}
};
//跨浏览器解析XML,返回值为XML文档对象
function parseXML(fileXmlName) {
var xmlDoc = null ;
try {
//IE加载
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (e) {
try {
//火狐等浏览器加载
xmlDoc = document.implementation.createDocument("","",null);
} catch (e) {
//谷歌浏览器加载
/*var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",fileXmlName,false);
xmlhttp.send(null);
if(xmlhttp.readyState == 4){
xmlDoc = xmlhttp.responseXML.documentElement;
}*/
}
}
//关闭异步加载
xmlDoc.async = false ;
//加载xml文件
xmlDoc.load(fileXmlName);
//返回XML文档对象
return xmlDoc;
}
}
</script>
</head>
<body>
<select name="province" id="province">
<option value="">请选择省份</option>
<option value="河北省">河北省</option>
<option value="湖南省">湖南省</option>
<option value="浙江省">浙江省</option>
<option value="北京市">北京市</option>
</select>
<select name="city" id="city">
<option value="">请选择市区</option>
</select>
</body>
</html>