JavaScript讀取xml實現下拉選單

antzone發表於2017-03-21
原文網址 : https://www.softwhy.com/article-4103-1.html
JavaScriptXML

xml檔案可以儲存資料，雖然現在更為流行使用json格式資料，但是xml檔案還是在大量使用中，下面就介紹一下javascript讀取xml檔案資料，然後生成下拉導航選單的程式碼。

一.javascript程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function loadXML(){ 
  var xmlDoc; 
  try{ 
    //IE 
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
  }
  catch(e){ 
    try{ 
      xmlDoc = document.implementation.createDocument("","",null); 
    }
    catch(e){ 
      alert(e.message); 
      return; 
    } 
  } 
  xmlDoc.async=false; 
  xmlDoc.load("cities.xml"); 
  return xmlDoc; 
} 
//網頁載入完在載入 完成省份載入 
onload=function(){ 
  var xmlDocument = loadXML(); 
  var provinceArr =xmlDocument.getElementsByTagName("province"); 
  var proSize = provinceArr.length; 
  for(var i=0;i<proSize;i++){ 
    //建立option節點 
    var optionElement = document.createElement("option"); 
    var provinceName = provinceArr[i].getAttribute("name");
    //建立文字節點 
    var textElement =document.createTextNode(provinceName); 
    optionElement.appendChild(textElement); 
    optionElement.setAttribute("value", provinceName); 
    var node = document.getElementById("province"); 
    node.appendChild(optionElement); 
  } 
} 
//省份改變事件 
function changeProvince(node){ 
  //獲取選擇的角標 
  var index = node.selectedIndex; 
  //獲取對應的省份名 
  var provinceName = node.options[index].value; 
  loadCities(provinceName); 
} 
 
//根據省份編號載入城市資訊 
function loadCities(proName){ 
  var xmlDocument = loadXML(); 
  var provinceArr =xmlDocument.getElementsByTagName("province"); 
  //獲取城市的元素 
  var citySelectEle = document.getElementById("cities"); 
  var size = citySelectEle.options.length; 
  for(var i=size;i>0;i--){ 
    citySelectEle.remove(i); 
  } 
 
  //獲取省份的個數 
  var proSize = provinceArr.length; 
  var proElement; 
  //獲取對應的省份元素 
  for(var i=0;i<proSize;i++){ 
    if(provinceArr[i].getAttribute("name")==proName){ 
      proElement = provinceArr[i]; 
      break; 
    } 
  } 
  //獲取省份的城市資訊 
  var citiesArr = proElement.getElementsByTagName("city"); 
  var len = citiesArr.length; 
  for(var i=0;i<len;i++){ 
    //建立option節點 
    var optionElement = document.createElement("option"); 
    //獲取城市名 
    var cityName = citiesArr[i].firstChild.nodeValue; 
    //建立文字節點 
    var textElement =document.createTextNode(cityName); 
    optionElement.appendChild(textElement); 
    optionElement.setAttribute("value", cityName); 
    citySelectEle.appendChild(optionElement); 
  } 
} 
function getValue(){ 
  var pro = document.getElementById("province").value; 
  var city = document.getElementById("cities").value; 
  alert(pro+":"+city); 
} 
</script> 
</head> 
 
<body> 
<select id="province" onchange="changeProvince(this)"> 
<option value="" selected="selected">--省份--</option> 
</select> 
<select id="cities"> 
<option value="" selected="selected">--城市--</option> 
</select> 
<input type="button" value="彈出" onclick="getValue()"/> 
</body> 
</html>

二.xml檔案程式碼:

[XML] 純文字檢視 複製程式碼
<?xml version="1.0" encoding="UTF-8"?>
<xml-body>
  <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>
</xml-body>

相關文章