Javascript -- 级联菜单, javascript解析xml文件

cities.xml 保存省份和城市

<?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>

city.html

<!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>
     </select>
	 <select id="city" name="city">
	 	<option value="">请选择.....</option>
	 </select>
  </body>
  <script language="JavaScript">
  	 window.onload=function(){
		var provinceElement = document.getElementById("province");
		var cityElement = document.getElementById("city");
		var xmlDom = parseXML("cities.xml");
		var xmlProvinceElements = xmlDom.getElementsByTagName("province");
		for(var i=0;i<xmlProvinceElements.length;i++){
			var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
			var textElement = document.createTextNode(xmlProvinceName);
			var optionElement = document.createElement("option");
			optionElement.appendChild(textElement);
			optionElement.setAttribute("value",xmlProvinceName);
			provinceElement.appendChild(optionElement);
		}
		
		provinceElement.onchange = function(){
			var optionElements = cityElement.getElementsByTagName("option");
			for(var i=optionElements.length-1;i>0;i--){
				cityElement.removeChild(optionElements[i]);
			}
			var changename = this.value;
			for(var i=0;i<xmlProvinceElements.length;i++){
				var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
				if(changename==xmlProvinceName){
					var xmlCitiesElements = xmlProvinceElements[i].getElementsByTagName("city");
					for(var j=0;j<xmlCitiesElements.length;j++){
						var xmlCityName = xmlCitiesElements[j].firstChild.nodeValue;
						var textElement = document.createTextNode(xmlCityName);
						var optionElement = document.createElement("option");
						optionElement.appendChild(textElement);
						optionElement.setAttribute("value",xmlCityName);
						cityElement.appendChild(optionElement);	
					}
				}
			}
		}
		
	 }
	 
///////////////////////////////////////////////////////////////////////////////////////////////
	 function parseXML(filename){
		   var xmlDoc;
		   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;
			//解析器加载名为 "xxx.xml" 的 XML 文档
			xmlDoc.load(filename);
			return xmlDoc;	
    }
  </script>
</html>