Dom和XML的三級聯動源碼
在二級聯動（省、市）的基礎上，我又寫了三級聯動（省、市、縣），下拉列表的顯示效果。
可能代碼有一些亂和麻煩了，不知道大家有沒有什麼好的方法。
源碼如下：
首先是xml文件、 cities.xml
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="河北">
<city name="廊坊">
<county>固安</county>
<county>大城</county>
<county>文安</county>
<county>永清</county>
<county>香河</county>
</city>
<city name="保定">
<county>安新</county>
<county>淶水</county>
<county>易縣</county>
<county>滿城</county>
</city>
<city name="石家莊">
<county>趙縣</county>
<county>辛集</county>
<county>晉州</county>
<county>平山</county>
</city>
</province>
<province name="北京">
<city name="大興">
<county>房山</county>
<county>平谷</county>
<county>昌平</county>
<county>海淀</county>
</city>
<city name="朝陽">
<county>海淀</county>
<county>管莊</county>
<county>高碑店</county>
<county>傳媒</county>
</city>
</province>
<province name="河南">
<city name="開封">
<county>商丘</county>
<county>駐馬店</county>
<county>平頂山</county>
<county>洛陽</county>
<county>鄭州</county>
</city>
<city name="鄭州">
<county>鄭州市</county>
<county>中原區</county>
<county>上街區</county>
<county>中牟縣</county>
<county>滎陽市</county>
</city>
<city name="洛陽市">
<county>汝陽</county>
<county>孟津</county>
<county>欒川</county>
<county>洛寧</county>
</city>
<city name="平頂山市">
<county>新華區</county>
<county>石龍區</county>
<county>寶豐縣</county>
<county>魯山縣</county>
</city>
</province>
<province name="陝西">
<city name="西安">
<county>新城區</county>
<county>長安縣</county>
<county>雁塔區</county>
<county>碑林縣</county>
</city>
<city name="寶雞">
<county>金臺區</county>
<county>寶雞縣</county>
<county>太白</county>
<county>隴縣</county>
</city>
<city name="咸陽">
<county>渭城區</county>
<county>秦都區</county>
</city>
<city name="興平">
<county>永壽縣</county>
<county>禮泉縣</county>
<county>三原縣</county>
</city>
</province>
<province name="四川">
<city name="成都">
<county>金堂縣</county>
<county>新津縣</county>
<county>金牛區</county>
<county>武侯區</county>
</city>
<city name="峨眉山">
<county>夾江縣</county>
<county>沐川縣</county>
</city>
</province>
</china>
下面是JS代碼：
<!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=UTF-8">
<!--<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="county">
<option>
請選擇縣
</option>
</select>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//窗體加載完畢後 觸發函數
window.onload = function(){
var xmlDoc = parseXml("cities.xml");
//獲取省 xml
var provinceNodes = xmlDoc.getElementsByTagName("province");
//獲取市xml
var citieshtmlNodes = xmlDoc.getElementsByTagName("city");
//添加省的節點 html
var provinceNode = document.getElementById("province");
//添加市的節點 html
var citieshtmlNode = document.getElementById("city");
//添加縣的節點 html
var countieshtmlNode = document.getElementById("county");
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));//option子節點 的內容設置爲 省的名字
optionNode.setAttribute("value",value);//把這個省的名字 設置爲 option的value值
//添加到節點中
provinceNode.appendChild(optionNode);
}
//當你的省發生改變的時候 選擇對應的市
provinceNode.onchange = function(){
//清空 select
//獲取你 清空的 select 裏邊的所有的option節點對象
var cityhtmlOptionNodes = citieshtmlNode.getElementsByTagName("option");
//獲取長度
var len = cityhtmlOptionNodes.length;
//遍歷
for(var m=0;m<len;m++){
// 0 是有第二個對象 cityhtmlOptionNodes[1] 代表第二個對象 不爲null true null false
if(cityhtmlOptionNodes[1]){
//始終移除第二個對象
citieshtmlNode.removeChild(cityhtmlOptionNodes[1]);
}
}
//遍歷所有的省 節點對象
for(var i=0;i<provinceNodes.length;i++){
//判斷節點對象的值 等於 省節點的那麼的值 則 獲取該節點下面的所有的city節點對象
if(this.value==provinceNodes[i].getAttribute("name")){
//獲取所有的city節點對象
var citiesNode = provinceNodes[i].getElementsByTagName("city");
//遍歷city節點對象
for(var j=0;j<citieshtmlNode.length;j++){
//創建city節點對象的 option
var cityOptionNode = document.createElement("option");
var cityName = citiesNode[j].getAttribute("name");
//爲創建的option節點對象 添加文本節點對象
cityOptionNode.appendChild(document.createTextNode(cityName));
cityOptionNode.setAttribute("value",cityName);
//把創建的option添加到 指定的 節點對象中
citieshtmlNode.appendChild(cityOptionNode);
}
}
}
}
//當你的市發生改變的時候 選擇對應的縣
citieshtmlNode.onchange = function(){
//清空 select
//獲取你 清空的 select 裏邊的所有的option節點對象
var countyhtmlOptionNodes = countieshtmlNode.getElementsByTagName("option");
//獲取長度
var len = countyhtmlOptionNodes.length;
//遍歷
for(var m=0;m<len;m++){
// 0 是有第二個對象 cityhtmlOptionNodes[1] 代表第二個對象 不爲null true null false
if(countyhtmlOptionNodes[1]){
//始終移除第二個對象
countieshtmlNode.removeChild(countyhtmlOptionNodes[1]);
}
}
//遍歷所有的市 節點對象
for(var i=0;i<citieshtmlNodes.length;i++){
//判斷節點對象的值 等於 省節點的那麼的值 則 獲取該節點下面的所有的city節點對象
if(this.value==citieshtmlNodes[i].getAttribute("name")){
//獲取所有的縣節點對象
var countiesNode = citieshtmlNodes[i].getElementsByTagName("county");
//遍歷縣節點對象
for(var j=0;j<countiesNode.length;j++){
//創建county節點對象的 option
var countyOptionNode = document.createElement("option");
//爲創建的option節點對象 添加文本節點對象
countyOptionNode.appendChild(document.createTextNode(countiesNode[j].firstChild.nodeValue));
//把創建的option添加到 指定的 節點對象中
countieshtmlNode.appendChild(countyOptionNode);
}
}
}
}
function parseXml(filename){
var xmlDoc;
try{
//IE瀏覽器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
//非IE瀏覽器
xmlDoc = document.implementation.createDocument("","",null);
}catch(ex){
alert("你使用的是不是瀏覽器呀！");
}
}
//關閉異步加載，這樣確保在文檔完全加載之前解析器不會繼續腳本的執行
xmlDoc.async=false;
xmlDoc.load(filename);
return xmlDoc;
}
//JavaScript解析 xml文件
/*
* html 文件 document 文檔對象 節點
* xml 文件 需要創建
* xmlDoc對象
* //IE
* new ActiveXObject("控件名稱");//Microsoft.XMLDOM
* //firefox 非IE
* document.implementation.createDocument("","",null);
* */
}
//-->
</script>
運行結果如下：
