萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> javascript讀取Xml文件做一個二級聯動菜單示例

javascript讀取Xml文件做一個二級聯動菜單示例

 這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個二級聯動菜單,需要的朋友可以參考下

 代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <title>menu2level.html</title>  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <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>    效果如下:  http://img.blog.csdn.net/20140315235043343?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1aGVuZ2h1aTUyMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQ kFCMA==/dissolve/70/gravity/SouthEast  cities.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>   
copyright © 萬盛學電腦網 all rights reserved