<?xml version="1.0" encoding="GB2312"?> <china> <province name="吉林省"> <city>长春</city> <city>吉林市</city> <city>四平</city> <city>松原</city> <city>通化</city> </province> <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> <province name="山东省"> <city>济南</city> <city>青岛</city> <city>威海</city> <city>烟台</city> <city>潍坊</city> </province> </china><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test01.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <select id="province" name="province"> <option value="">请选择....</option> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="山东省">山东省</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body> <script language="JavaScript"> window.onload=function(){ document.getElementById("province").onchange=function(){ /* * <option value="吉林省">吉林省</option> * 标签中 value="吉林省"的值 */ var provinceValue=this.value; var cityElement=document.getElementById("city"); /******************************************************************************************************************/ //删除city下拉选的内容 /* * <select id="city" name="city"> <option value="">请选择.....</option> </select> */ var optionCityElements=cityElement.getElementsByTagName("option"); //从后往前删 for(var i=optionCityElements.length-1;i>0;i--){ cityElement.removeChild(optionCityElements[i]); } /******************************************************************************************************************/ //声明省的元素 var provinceElement=null; /**************************************************************************************************************/ //从xml文件中获取对应的省的元素 var xmlDoc=parseXml("cities.xml"); //<province name="吉林省"> var provinceXmlElements=xmlDoc.getElementsByTagName("province"); for(var i=0;i<provinceXmlElements.length;i++){ var provinceXmlElement=provinceXmlElements[i]; //获取<province name="吉林省">属性的值 var provinceXmlElementNameValue=provinceXmlElement.getAttribute("name"); //标签中 value="吉林省"的值和xml文件中<province name="吉林省">name属性的值比较 if (provinceValue == provinceXmlElementNameValue) { //如相同找到保存 provinceElement=provinceXmlElement; break; } } /**************************************************************************************************************/ if(provinceElement!=null){ /* * <province name="辽宁省"> <city>沈阳</city> <city>大连</city> <city>鞍山</city> <city>抚顺</city> <city>铁岭</city> </province> */ var cityXmlElements=provinceElement.getElementsByTagName("city"); //alert(cityXmlElements.length); //遍历 for(var i=0;i<cityXmlElements.length;i++){ //<city>沈阳</city> var cityXmlValue=cityXmlElements[i].firstChild.nodeValue; //alert(cityXmlValue); //创建<option value="四平">四平</option> var optionElement=document.createElement("option"); optionElement.setAttribute("value",cityXmlValue); var textElement=document.createTextNode(cityXmlValue); optionElement.appendChild(textElement); /* * 添加到 <select id="city" name="city"> * <option value="">请选择.....</option> </select> */ cityElement.appendChild(optionElement); } } } } function parseXml(fileName){ var xmlDoc=null; try {//Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e){ try {//Firefox, Mozilla, Opera, etc. xmlDoc=document.implementation.createDocument("","",null); }catch(e){ } } //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。 xmlDoc.async=false; //解析器加载名为 "cities.xml" 的 XML 文档 xmlDoc.load(fileName); return xmlDoc; } </script> </html>