首頁 > 開發者 > JavaScript
這篇文章主要介紹了使用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/I0JBQkFCMA==/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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
