var optionelems = cityelem.getElementsByTagName("option");

最新推荐文章于 2024-03-13 12:15:11 发布

tfy1332

最新推荐文章于 2024-03-13 12:15:11 发布

阅读量980

点赞数

本文链接：https://blog.csdn.net/tfy1332/article/details/8564419

版权

<!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").οnclick=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>