<!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{//IExmlDoc=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>
效果如下：
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>
版权声明：本文为博主原创文章，，未经博主允许不得转载。
你曾经说，你曾经说。走在爱的旅途，我们的脚步多么轻松……
