读取XML文件内容

city.xml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>city</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>
			<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(){
				//alert("ddd");
/*****************************************************************************************************/
				//获取变化的省的值
				var changeProvinceValue=this.value;//吉林省  辽宁省
				//alert(changeProvinceValue);
/*****************************************************************************************************/
				//清空城市下拉选
				var cityElement = document.getElementById("city");
				/*
				<select id="city" name="city">
					<option value="">
						请选择……
					</option>
				</select>
				*/
				var cityoptionElements =  cityElement.getElementsByTagName("option");
				//从后往前删除
				for(var i = cityoptionElements.length-1;i>0;i--){
					cityElement.removeChild(cityoptionElements[i]);
				}
/*****************************************************************************************************/
				//测试xml是否加载成功
				var xmlDoc = parseXML("cities.xml");
/*****************************************************************************************************/
				var provinceElement = null;
				
				//定位到具体省，此处取的是cities.xml文件中省
				var xmlProvinceElements = xmlDoc.getElementsByTagName("province");
				for(var i=0;i<xmlProvinceElements.length;i++){
					var xmlProvinceElement = xmlProvinceElements[i];
					var nameAttrValue = xmlProvinceElement.getAttribute("name");
					//alert(nameAttrValue);//cities.xml文件中省名
					if(changeProvinceValue==nameAttrValue){
						//把符合条件的省保存在外部方便下面使用
						provinceElement = xmlProvinceElement;
						break;//如果选中的省与遍历的省相等，就不往下面执行
					}
				}
/*****************************************************************************************************/
				/**
				<province name="吉林省">
					<city>长春市</city>
					<city>吉林市</city>
					<city>四平</city>
					<city>松原</city>
					<city>通化</city>
				</province>
				**/
				//provinceElement!=null说明在XML里找到了选中的省并赋值给了provinceElement
				//alert("provinceElement="+provinceElement.getAttribute("name"));
				if(provinceElement!=null){
					//找到此省下的city并放在city select下
					var xmlCityElements = provinceElement.getElementsByTagName("city");
					for(var i=0;i<xmlCityElements.length;i++){
						//xmlCityElement为<city>长春市</city>
						var xmlCityElement = xmlCityElements[i];
						//长春市是xmlCityElement的firstChild
						//alert(xmlCityElement.firstChild.nodeValue);
						var cityValue = xmlCityElement.firstChild.nodeValue;
						
						//创建option标签<option></option>
						var optionElement = document.createElement("option");
						//<option value="长春市"></option>
						optionElement.setAttribute("value",cityValue);
						//长春
						var txtElement = document.createTextNode(cityValue);
						//<option value="长春市">长春市</option>
						optionElement.appendChild(txtElement);
						//增加到city select下
						/*
						<select id="city" name="city">
							<option value="">
								请选择……
							</option>
						</select>
						*/
						
						cityElement.appendChild(optionElement);
					}
				}
/*****************************************************************************************************/
			}
		}
	
		/*
		加载XML文件
		*/
		function parseXML(filename){// 用于 IE 的代码：
			try{
			  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
			}catch(e){
				try{// 用于 Mozilla,Firefox,Opera,等浏览器的代码：
			 		xmlDoc=document.implementation.createDocument("","",null);
				}catch(e){}
			}
			//关闭异步加载
			
			xmlDoc.async=false;
			//加载xml文档
			xmlDoc.load(filename);
			return xmlDoc;
		}
	</script>
</html>

cities.xml

<?xml version="1.0" encoding="UTF-8"?>
<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>
	<province name="四川省">
		<city>成都</city>
		<city>广安</city>
		<city>资阳</city>
		<city>巴中</city>
		<city>南充</city>
	</province>
</china>

原文链接：https://www.f2er.com/xml/300013.html

猜你在找的XML相关文章