city.xml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</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 language="JavaScript">
window.onload=function(){
document.getElementById("province").onchange=function(){
//alert("ddd");
/*****************************************************************************************************/
//获取变化的省的值
var changeProvinceValue=this.value;//吉林省 辽宁省
//alert(changeProvinceValue);
/*****************************************************************************************************/
//清空城市下拉选
var cityElement = document.getElementById("city");
/*
<select id="city" name="city">
<option value="">
请选择……
</option>
</select>
*/
var cityoptionElements = cityElement.getElementsByTagName("option");
//从后往前删除
for(var i = cityoptionElements.length-1;i>0;i--){
cityElement.removeChild(cityoptionElements[i]);
}
/*****************************************************************************************************/
//测试xml是否加载成功
var xmlDoc = parseXML("cities.xml");
/*****************************************************************************************************/
var provinceElement = null;
//定位到具体省，此处取的是cities.xml文件中省
var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
for(var i=0;i<xmlProvinceElements.length;i++){
var xmlProvinceElement = xmlProvinceElements[i];
var nameAttrValue = xmlProvinceElement.getAttribute("name");
//alert(nameAttrValue);//cities.xml文件中省名
if(changeProvinceValue==nameAttrValue){
//把符合条件的省保存在外部方便下面使用
provinceElement = xmlProvinceElement;
break;//如果选中的省与遍历的省相等，就不往下面执行
}
}
/*****************************************************************************************************/
/**
<province name="吉林省">
<city>长春市</city>
<city>吉林市</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
**/
//provinceElement!=null说明在XML里找到了选中的省并赋值给了provinceElement
//alert("provinceElement="+provinceElement.getAttribute("name"));
if(provinceElement!=null){
//找到此省下的city并放在city select下
var xmlCityElements = provinceElement.getElementsByTagName("city");
for(var i=0;i<xmlCityElements.length;i++){
//xmlCityElement为<city>长春市</city>
var xmlCityElement = xmlCityElements[i];
//长春市是xmlCityElement的firstChild
//alert(xmlCityElement.firstChild.nodeValue);
var cityValue = xmlCityElement.firstChild.nodeValue;
//创建option标签<option></option>
var optionElement = document.createElement("option");
//<option value="长春市"></option>
optionElement.setAttribute("value",cityValue);
//长春
var txtElement = document.createTextNode(cityValue);
//<option value="长春市">长春市</option>
optionElement.appendChild(txtElement);
//增加到city select下
/*
<select id="city" name="city">
<option value="">
请选择……
</option>
</select>
*/
cityElement.appendChild(optionElement);
}
}
/*****************************************************************************************************/
}
}
/*
加载XML文件
*/
function parseXML(filename){// 用于 IE 的代码：
try{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{// 用于 Mozilla,Firefox,Opera,等浏览器的代码：
xmlDoc=document.implementation.createDocument("","",null);
}catch(e){}
}
//关闭异步加载
xmlDoc.async=false;
//加载xml文档
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</html>
cities.xml
<?xml version="1.0" encoding="UTF-8"?> <china> <province name="吉林省"> <city>长春市</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> <province name="四川省"> <city>成都</city> <city>广安</city> <city>资阳</city> <city>巴中</city> <city>南充</city> </province> </china>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。