怎样实现二级联动
china.xml文档
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="河南省">
<city>郑州</city>
<city>洛阳</city>
<city>安阳</city>
</province>
<province name="河北省">
<city>石家庄</city>
<city>邯郸</city>
<city>张家口</city>
</province>
<province name="天津">
<city>和平区</city>
<city>北辰区</city>
<city>河西区</city>
</province>
</china>
c.html
<!DOCTYPE html>
<html>
<head>
<title>c.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
var xmlDocument = null;
var provinces = null;
var domSelectcities = null;
window.onload = function() {
xmlDocument = parseXML("china.xml");
provinces = xmlDocument.getElementsByTagName("province");
//获取省select对应的dom对象
var domSelectPro = document.getElementById("pro");
domSelectcities = document.getElementById("city");
for ( var i = 0; i < provinces.length; i++) {
var xmlPro = provinces[i];
//<option>xxxxx</option>
var newChild = document.createElement("option");
//xxxxx
var newTxt = document.createTextNode(xmlPro.getAttribute("name"));
//把xxxxx添加到option
newChild.appendChild(newTxt);
//把option添加到select
domSelectPro.appendChild(newChild);
}
//注册事件
domSelectPro.onchange = onSelectProcg;
};
var onSelectProcg = function() {
//清空html select 中city
// domSelectcities.childNodes.length=0; //思考以下 请参看redarmy_chen
//第一种：domSelectcities.length=0;
//第二种：
var cnodes=domSelectcities.childNodes;
for(var r=0;r<cnodes.length;){
domSelectcities.removeChild(cnodes[0]);
}
//遍历xml所有的省
for ( var i = 0; i < provinces.length; i++) {
//得到xml文件中具体的某个省
var xmlPro = provinces[i];
//判断当前省市xml文件中的那个省
if (this.value == xmlPro.getAttribute("name")) {
//解析出xml文件省下面对应的city
var xmlCities = xmlPro.getElementsByTagName("city");
for ( var k = 0; k < xmlCities.length; k++) {
//<option>河西区</option>
var newChild = document.createElement("option");
//河西区
var newTxt = document.createTextNode(xmlCities[k].firstChild.nodeValue);
//把xxxxx添加到option
newChild.appendChild(newTxt);
//把option添加到select
domSelectcities.appendChild(newChild);
}
}
}
};
function parseXML(filename) {
var xmlDoc; //document对象
try { //Internet Explorer
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
} catch (e) {
try { //Firefox, Mozilla, Opera, etc.
xmlDoc = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
xmlDoc.async = false;
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</head>
<body>
<div align="center">
<h3>二级联动</h3>
<select id="pro">
<option>请选择省市</option>
</select> <select id="city">
<option>请选择市</option>
</select>
</div>
</body>
</html>
