Dom和xml的二級聯動：
<!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 provinceNode = document.getElementById("province");
//獲取市的節點
var citiesHtmlNode = document.getElementById("city");
// 獲取縣的節點
//var countryNode = document.getElemnetById("country");
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.remove(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);
//遍歷city到city的select中
for (var j = 0; j < citiesNode.length; j++) {
var cityOptionNode = document.createElement("option");
//爲創建的option對象添加文本 citieNodes[j].firstChild.value
cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));
//把創建的對象添加到city中
citiesHtmlNode.appendChild(cityOptionNode);
}
}
}
}
}
//用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="石家莊">
</city>
<city name="廊坊">
</city>
<city name="保定">
</city>
<city name="邢臺">
</city>
<city name="滄州">
</city>
<city name="衡水">
</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>
<city>鄭州</city>
</province>
<province name="安徽">
<city>阜陽</city>
<city>亳州</city>
<city>合肥</city>
</province>
</china>