Dom和XML的二級聯動菜單詳解及其源代碼
Xml文件： cities2.xml
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="河北">
<city>廊坊</city>
<city>保定</city>
<city>石家莊</city>
<city>邯鄲</city>
</province>
<province name="北京">
<city>大興</city>
<city>朝陽</city>
<city>海淀</city>
<city>平山</city>
</province>
<province name="河南">
<city>洛陽</city>
<city>商丘</city>
<city>平頂山</city>
<city>鄭州</city>
</province>
<province name="陝西">
<city>西安</city>
<city>寶雞</city>
<city>興平</city>
</province>
<province name="四川">
<city>成都</city>
<city>重慶</city>
<city>內江</city>
<city>樂山</city>
<city>南充</city>
</province>
</china>
Html文件：liandong2.html
省 、市的二級聯動菜單
效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>liandong2.html</title>
</head>
//樣式部分
<body>
<div align="center">
<div id="data">
<!—用下拉列表的形式表示省 和市-à
<select id="province">
<option>
請選擇省
</option>
</select>
<select id="city">
<option>
請選擇市
</option>
</select>
</div>
</div>
</body>
</html>
//JS部分
<script type="text/javascript">
<!--
//窗體加載完畢後 觸發函數
window.onload = function(){
var xmlDoc = parseXml("cities2.xml");
//獲取省 xml
var provinceNodes = xmlDoc.getElementsByTagName("province");
//添加省的節點 html
var provinceNode = document.getElementById("province");
//添加市的節點 html
var citieshtmlNode= document.getElementById("city");
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<citiesNode.length;j++){
//創建city節點對象的 option
var cityOptionNode = document.createElement("option");
//爲創建的option節點對象 添加文本節點對象
cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));
//把創建的option添加到 指定的 節點對象中
citieshtmlNode.appendChild(cityOptionNode);
}
}
}
}
}
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>