原文來自：http://zhuleishitou.iteye.com/blog/969452
在出ie瀏覽器之外的瀏覽器在讀取xml 會將空格 換行 都讀取成節點
所以我們必須做出判斷
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>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">-->
</head>
<body>
<h1> 解析xml文件實現省市級聯下拉菜單 </h1>
<div> <span>
<select id="province" name="province">
<option> 請選擇省 </option>
</select>
</span> <span>
<select id="cities" name="city">
<option> 請選擇相應省下面的市 </option>
</select>
</span> </div>
</body>
</html>
<script>
window.onload = function() {
var xmlDom;
var bool_IE = (window.ActiveXObject ? true : false);
if (bool_IE) {
//針對的是IE瀏覽器 創建一個空的微軟 XML 文檔對象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
} else {
//在 Firefox 及其他瀏覽器中的 XML 解析器
//創建一個空的 XML 文檔對象。
xmlDom = document.implementation.createDocument("", "", null);
}
//關閉異步加載，這樣確保在文檔完全加載之前解析器不會繼續腳本的執行
xmlDom.async = false;
//解析器加載名爲 "xxx.xml" 的 XML 文檔、
xmlDom.load("city.xml");
//獲取xml文件的根節點
var root = xmlDom.documentElement;
//獲取根節點下面的省節點
var provinces = root.childNodes;
var province = document.getElementById("province");
for ( var i = 0; i < provinces.length; i++) {
//獲取省節點的name屬性的值
//爲了兼容火狐瀏覽器 添加 ==============>provinces[i].nodeType==1
if (provinces[i].nodeType == 1) {
var name = provinces[i].getAttribute("name");
;
//創建一個option
var opt = document.createElement("option");
//爲option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父節點中
province.appendChild(opt);
}
}
var cities = document.getElementById("cities");
province.onchange = function() {
var pce = document.getElementById("province");
var opts = pce.options;
var opt1 = opts[pce.selectedIndex];
var name = opt1.innerHTML;
for ( var i = 0; i < provinces.length; i++) {
//獲取省節點的name屬性的值
var name1 = "";
if (provinces[i].nodeType == 1) {
name1 = provinces[i].getAttribute("name");
if (name == name1) {
cities.length = 1;//每次改變的時候清空
var pros = provinces[i];
var citys = pros.childNodes;
for ( var j = 0; j < citys.length; j++) {
//創建一個option
if (citys[j].nodeType == 1) {
var opt1 = document.createElement("option");
//爲option添加文本
opt1
.appendChild(document
.createTextNode(citys[j].firstChild.nodeValue));
//添加到父節點中
cities.appendChild(opt1);
}
}
}
}
}
}
}
</script>
//xml中文件
======================================================================================
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<city>大興</city>
<city>昌平</city>
<city>朝陽</city>
<city>海淀</city>
<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>
<city>開封</city>
<city>商丘</city>
<city>洛陽</city>
</province>
</cities>