dom加xml的三级联动源码
找了半天的bug，那么长时间，郁闷死了，晚上都没有睡好觉。就一个最简单的buy，不是某个单词写的不对，而是命名重复！！！！！！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example01.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=GBK">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--三级联动-->
<div align="center">
<div id="data">
<select id="province">
<option>请选择省</option>
</select>
<select id="city">
<option>请选择市</option>
</select>
<select id="country">
<option>请选择县</option>
</select>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var xmlDoc = parseXml("/day01/cities.xml");
//获取省 xml
var provinceNodes = xmlDoc.getElementsByTagName("province");
var cityNodes = xmlDoc.getElementsByTagName("city");
//alert(cityNodes.length);
//添加省的节点
var provinceNode = document.getElementById("province");
//获取市的节点
var citiesHtmlNode = document.getElementById("city");
// 添加县的节点
var countryNode = document.getElementById("country");
//alert(countryNode);
for (var i = 0; i < provinceNodes.length; i++) {
//创建option html
var optionNode = document.createElement("option");
//获取省的名称
var value = provinceNodes[i].getAttribute("name");
//为option添加文本节点 值为省的name属性值
optionNode.appendChild(document.createTextNode(value));
optionNode.setAttribute("value", value); //为添加的option设置值
//添加到节点中
provinceNode.appendChild(optionNode);
}
//添加市
provinceNode.onchange = function(){
//清空原有的的节点
//获取清空的select里面的所有的option对象
var cityHtmlOptionNodes = citiesHtmlNode.getElementsByTagName("option");//获取的是所有的option
//获取长度
var len = cityHtmlOptionNodes.length;
for (var m = 0; m < len; m++) {
//看是否有第一个对象，【1】代表的第二个对象，如果不为空
if (cityHtmlOptionNodes[1]) {
//始终移除第二个对象
citiesHtmlNode.removeChild(cityHtmlOptionNodes[1]);
}
}
//添加市的名称
for (var i = 0; i < provinceNodes.length; i++) {
//判断点击的是否是value
if (this.value == provinceNodes[i].getAttribute("name")) {
//通过省节点来找到city节点对象
var citiesNode = provinceNodes[i].getElementsByTagName("city");
alert(citiesNode.length);
//遍历city到city的select中
for (var j = 0; j < citiesNode.length; j++) {
//alert(citiesNode.length);
var cityOptionNode = document.createElement("option");
//为创建的option对象添加文本
var value = citiesNode[j].firstChild.nodeValue;
//alert(value);
cityOptionNode.appendChild(document.createTextNode(value));
//把创建的对象添加到city中
citiesHtmlNode.appendChild(cityOptionNode);
}
}
}
}
//添加县
citiesHtmlNode.onchange = function(){
//删除元素
//或得到option的元素来删除
var optionNodes = countryNode.getElementsByTagName("option");
var len = optionNodes.length;
for (var m = 0; m < len; m++) {
if (optionNodes[1]) {
countryNode.removeChild(optionNodes[1]);
}
}
for (var i = 0; i < cityNodes.length; i++) {
// alert(cityNodes.length);
//判断点击的是否是value
if (this.value == cityNodes[i].getAttribute("name")) {
//alert(this.value.length);
//通过省节点来找到city节点对象
var countryNodes = cityNodes[i].getElementsByTagName("country");
//alert(countryNode.length);
//遍历city到city的select中
for (var j = 0; j < countryNodes.length; j++) {
// alert(countryNode.length);
var countryOptionNode = document.createElement("option");
//为创建的option对象添加文本
var value = countryNodes[j].firstChild.nodeValue;
//alert(value);
countryOptionNode.appendChild(document.createTextNode(value));
//把创建的对象添加到city中
countryNode.appendChild(countryOptionNode);
}
}
}
}
}
//用js解析xml文件
/*
* html文档 是document文档对象 节点
* xml 文件 需要创建
* 根据不同的浏览器有不同的创建方式
* 在IE中需要一个空间名称来创建
* @param {Object} id
*/
//解析xml文档
function parseXml(filename){
var xmlDoc;
try {
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
//非IE浏览器
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (ex) {
alert("你使用的是不是浏览器呀！");
}
}
//解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行
xmlDoc.async = false;
xmlDoc.load(filename);
return xmlDoc;
}
</script>
xml文件：
<?xml version="1.0" encoding="GBK"?>
<china>
<province name="河北">
<city name="石家庄">石家庄
<country>文安县</country>
<country>固安县</country>
<country>魏县</country>
</city>
<city name="廊坊">廊坊
<country>文安县</country>
<country>固安县</country>
<country>魏县</country>
</city>
<city name="保定">保定
<country>徐水县</country>
<country>涿州县</country>
<country>魏县</country>
</city>
<city name="邢台">邢台
<country>巨鹿县</country>
<country>宁晋县</country>
<country>隆尧县</country>
</city>
<city name="沧州">沧州
<country>巨鹿县</country>
<country>宁晋县</country>
<country>隆尧县</country>
</city>
<city name="衡水">衡水
<country>巨鹿县</country>
<country>宁晋县</country>
<country>隆尧县</country>
</city>
</province>
<province name="北京">
<city>朝阳</city>
<city>海淀</city>
</province>
<province name="河南">
<city>开封</city>
<city>商丘</city>
<city>驻马店</city>
<city>平顶山</city>
<city>洛阳</city>
<city>郑州</city>
</province>
<province name="安徽">
<city>阜阳</city>
<city>亳州</city>
<city>合肥</city>
</province>
</china>