js解析XML文件，并将城市显示在下拉列表，选中城市后出现城市介绍

最新推荐文章于 2022-09-29 11:49:44 发布

沿途看风景

最新推荐文章于 2022-09-29 11:49:44 发布

阅读量1.6k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u011193139/article/details/38263771

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在群上看到有人问问题，就闲着没事做了一下。

需求就在读取XML文件的信息，城市显示在下拉列表中，选中城市出现城市介绍，界面没有怎么改动，大家凑合着看吧，哈哈。

XML文件如下 city.xml

<?xml version="1.0" encoding="gb2312"?>
<CityList>
	<City Name="北京">
		<Description>京有着三千余年的建城史和八百五十余年的建都史...</Description>
	</City>
	<City Name="上海">
		<Description>上海，中国大陆第一大城市；四个中央直辖市之一</Description>
	</City>
	<City Name="广州">	
		<Description>广州，简称穗，别称羊城、穗城、穗垣、仙城、花城；解放前旧称省城。</Description>
	</City>
	<City Name="成都">	
		<Description>位于四川省中部，是中西部地区重要的中心城市。西南地区科技中心、商贸中心、金融中心和交通通信枢纽。</Description>
	</City>
	<City Name="沈阳">	
		<Description>沈阳，辽宁省省会，中国15个副省级城市之一，中国七大区域中心城市之一</Description>
	</City>
</CityList>

是在firfox浏览器下面调试的，有个注册事件函数不起作用，只好注销掉了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>city</title>
<style type="text/css">
	#cityIntro {
		width:300px;
		height:100px;
		border:1px solid #3F9}
</style>
<script type='text/javascript' defer=true>
//加载xml文件
	function loadXMLDoc(dname) 
	{
		try //Internet Explorer
  		{
 			 xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
 		 }
			catch(e)
  			{
  				try //Firefox, Mozilla, Opera, etc.
    				{
    				xmlDoc=document.implementation.createDocument("","",null);
   					 }
 					 catch(e) {alert(e.message)}
 					 }
					try 
  					{
					  xmlDoc.async=false;
					  xmlDoc.load(dname);
					  return(xmlDoc);
 					 }
					catch(e) {alert(e.message)}
					return(null);
					}

	//主函数
    function loadXMLFile(){
		xmlDoc = loadXMLDoc("city.xml");
		var city = xmlDoc.getElementsByTagName("City");
		var myselect = document.getElementById("myselect");
		for(var i = 0;i<city.length;i++){
			var opt = document.createElement("option");
			opt.text = city[i].getAttribute("Name");
			
			myselect.appendChild(opt);
		}
		//catchEvent(myselect,'change',checkSelected());
	}
	//监听函数不起作用，不知道为什么
	 function catchEvent(eventobj,event,eventHandler){  
       if(eventobj.addEventListener){  
            eventobj.addEventListener(event,eventHandler,false);  
            }else if(eventobj.attachEvent){  
                event = 'on'+event;  
                eventobj.attachEvent(event,eventHandler);  
                }  
        }
		
		//onchange事件触发函数，选择城市后会显示 城市的相关信息
		function checkSelected(){
				var opt = document.getElementsByTagName("option");
				var city = xmlDoc.getElementsByTagName("City");
				var description = xmlDoc.getElementsByTagName("Description");
				for(var i = 0;i<opt.length;i++){
					if(opt[i].selected == true){
							for(var j = 0;j<city.length;j++){
								if(opt[i].text == city[j].getAttribute("Name")){
									var cityIntro =  document.getElementById("cityIntro");
										if(document.getElementsByTagName("p").length>0){
											var reP = document.getElementsByTagName("p");
											for(var k = 0; k<reP.length;k++){
												cityIntro.removeChild(reP[0]);
												}
											}
										var text = document.createTextNode(description[j].childNodes[0].nodeValue);
										var p = document.createElement("p");
										
										p.appendChild(text);
										cityIntro.appendChild(p);
										break;
									}
								}
							}
				
						}
				
					}  

	
	
</script>
</head>
<body onLoad="loadXMLFile()">
hahah
	<div id="divcontent">
    	<select id="myselect" onChange="checkSelected()">
        <option> -- </option>
        </select>
    </div>
    <div id="cityIntro"></div>
</body>
</html>