1,准备省级信息:cities.xml
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province id="hunan" name="湖南省">
<city>长沙市</city>
<city>株洲市</city>
<city>湘潭市</city>
<city>吉首市</city>
<city>张家界</city>
</province>
<province id="jilin" name="吉林省">
<city>长春</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province id="liaoning" name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<province id="shandong" name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>
2,XML 文件解析器- 跨浏览器:util.js
/**
* Created by lwuyang on 14-2-4.
*/
function parseXML(fileXmlName){
var xmlDoc;
try{//Internet Explorer 创建一个空的xml文档
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{//Firefox, Mozilla, Opera, 创建一个空的xml文档
xmlDoc = document.implementation.createDocument("","",null);
}catch (e){
}
}
//关闭异步加载
xmlDoc.async = false;
//加载xml文件
xmlDoc.load(fileXmlName);
return xmlDoc;
}
3,页面实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>省级联动</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="util.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择...</option>
<option value="湖南省">湖南省</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择...</option>
</select>
</body>
<script type="text/javascript" language="JavaScript">
document.getElementById("province").onchange = function(){
//清空
var cityEle = document.getElementById("city");
var optionEles = cityEle.getElementsByTagName("option");
for(var z = optionEles.length -1; z>0;z--){
cityEle.removeChild(optionEles[z]);
}
//1,获取页面选中的身份消息
var provinceValue = this.value;
//2,解析xml文件
var docXml = parseXML("cities.xml");
//3,获取xml文件中的所有省份信息
var provinceXmlEles = docXml.getElementsByTagName("province");
//4,遍历xml文件中的省份
for(var i = 0; i < provinceXmlEles.length;i++){
//获取省份
var provinceXmlEle = provinceXmlEles[i];
var provinceXmlValue = provinceXmlEle.getAttribute("name");
// 5,判断选中的省份和provinceXmlValue是否一致
if(provinceValue == provinceXmlValue){
//6, 获取对应的城市信息
var cityXmlEles = provinceXmlEle.getElementsByTagName("city");
// alert(cityXmlEles.length);
//7,遍历城市信息
for(var j = 0 ; j < cityXmlEles.length; j++){
var cityXmlEle = cityXmlEles[j];
// alert(cityXmlEle);
var cityXmlValue = cityXmlEle.firstChild.nodeValue;
// var cityXmlValue = cityXmlEle.text;//这里需要注意的是,火狐和google浏览器不支持
// alert(cityXmlValue);
//8 ,添加
//创建<option>元素
var optionEle = document.createElement("option");
//设置属性
optionEle.setAttribute("value",cityXmlValue);
//添加文本节点
var optionText = document.createTextNode(cityXmlValue);
optionEle.appendChild(optionText);
cityEle.appendChild(optionEle);
}
}
}
}
</script>
</html>