dom加xml的三級聯動源碼

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章