<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test01.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/javascript.js"></script>
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
document.getElementById("province").onclick=function(){
//清空
/*
* <select id="city" name="city">
<option value="">请选择.....</option>
<option value="长春">长春</option>
</select>
*/
var cityelem = document.getElementById("city");
var optionelems = cityelem.getElementsByTagName("option");
// alert("tfy");
for (var i = 1; i < optionelems.length; i++) {
// alert("tfy");
cityelem.removeChild(optionelems[i]);
// cityelem.removeChild(optionelems[1]);
// alert("tfy");
i--;
// alert("tfy");
}
//1 获取页面选中省份的信息
// alert("tfy");
var provinceValue=this.value;
//2 解析xml文件
var docXml=parseXML("cities.xml");
//3 获取xml文件中所有省份的信息
var provinceXmlElements=docXml.getElementsByTagName("province");
// 4 遍历
for(var j=0;j<provinceXmlElements.length;j++){
// 5 获取一个省份信息
var provinceXmlElement=provinceXmlElements[j];
var provinceXmlValue=provinceXmlElement.getAttribute("name");
// 6 对比
if(provinceValue==provinceXmlValue){
// 7 获取所有城市标签的信息
var cityXmlelems=provinceXmlElement.getElementsByTagName("city");
// alert("tfy");
//8 将解析的城市信息添加到第二个下拉框中
for(var k=0;k<cityXmlelems.length;k++ ){
var cityXmlelem=cityXmlelems[k];
var cityXmlValue=cityXmlelem.firstChild.nodeValue;
// alert("tfy");
/*
* <select id="city" name="city">
<option value="">请选择.....</option>
<option value="长春">长春</option>
</select>
*/
var optionelem=document.createElement("option");
optionelem.setAttribute("value",cityXmlValue);
var cityText=document.createTextNode(cityXmlValue);
optionelem.appendChild(cityText);
cityelem.appendChild(optionelem);
}
}
}
}
</script>
</html>