xml文档：
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="请选择城市">
<city>请选择市区</city>
</province>
<province name="北京市">
<city>海淀区</city>
<city>朝阳区</city>
<city>大兴区</city>
<city>昌平区</city>
</province>
<province name="天津市">
<city>北辰区</city>
<city>和平区</city>
<city>虹桥区</city>
<city>AA区</city>
</province>
<province name="上海市">
<city>BB区</city>
<city>CC区</city>
<city>DD区</city>
<city>MM区</city>
</province>
</china>
js文件的原码：
window.onload = function() {
var xmlDoc = getXmlDocument("./js/citys.xml");
// alert(xmlDoc);
var china = xmlDoc.documentElement;
// alert(china);
var provincesXMLNode = china.getElementsByTagName("province");
var provinceHTMLNode = $("province");
var cityHTMLNode = $("city");
for ( var i = 0; i < provincesXMLNode.length; i++) {
var provinceXMLNode = provincesXMLNode[i];
var provinceXMLNodeName = provinceXMLNode.getAttribute("name");
var option = document.createElement("option");
option.setAttribute("value", provinceXMLNodeName);
var optionText = document.createTextNode(provinceXMLNodeName);
option.appendChild(optionText);
provinceHTMLNode.appendChild(option);
}
provinceHTMLNode.onchange = function() {
var cNodes = provinceHTMLNode.childNodes;
for(var i=0;i<cNodes.length;i++){
var optionselect = cNodes[i];
if(optionselect.nodeType==1){
if(optionselect.selected){
var proname = optionselect.getAttribute("value");
for(var k=0;k<provincesXMLNode.length;k++){
var proXML = provincesXMLNode[k];
var provalue = proXML.getAttribute("name");
if(proname==provalue){
for(var jj=0;jj<cityHTMLNode.childNodes.length;){
cityHTMLNode.removeChild(cityHTMLNode.childNodes[jj]);
}
var cityXMLNode = proXML.childNodes;
//遍历
for(var n=0;n<cityXMLNode.length;n++){
var cXMLNode=cityXMLNode[n];
if(cXMLNode.nodeType==1){
//alert();
var cityop = document.createElement("option");
var cityopTextNode = document.createTextNode(cXMLNode.firstChild.nodeValue);
cityop.appendChild(cityopTextNode);
cityHTMLNode.appendChild(cityop);
}
}
}
}
}
}
}
};
};
function $(id) {
return document.getElementById(id);
}
function getXmlDocument(fileName) {
var xmlDomcument;
try {
xmlDomcument = new ActiveXObject("Microsoft.XMLDOM");
} catch (e) {
try {
xmlDomcument = document.implementation.createDocument("", "", null);
} catch (e) {
alert("浏览器版本过低。。。。");
}
}
// 关闭异步加载，确保完全加载再解析
xmlDomcument.async = false;
// 装载文件
xmlDomcument.load(fileName);
return xmlDomcument;
}
html页面的原码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>js_city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/js_xml.js"></script>
</head>
<body>
<div align="center">
<select id="province"></select>
<select id="city">
<option>请选择市区</option>
</select>
</div>
</body>
</html>