jQuery ajax解析xml文件demo

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

解析xml文件，然后将城市列表还原到下拉列表框中；当选择下拉列表框时，在对应的文本框中显示该城市信息。

前端代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ajax解析xml文件demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head><body>
<input type="button" value="加载xml文件" onClick="cityajax();this.disabled = true;"><br>
城市列表:
<select id="list">
</select>
<br>
城市信息：
<textarea id="texts"></textarea><script>
function cityajax(){
var olist=$("#list");
var otext=$("#texts");
var arr=new Array();
$.ajax({
url:"/city_xml/XML/city.xml",
type:"POST",
dataType:'xml',
success:function(xml){
$(xml).find("City").each(function(i) {
//获取城市名字
var cityName=$(this).attr("Name");
//添加到下拉框,设置内容
$("<option></option>").appendTo(olist).text(cityName);
//获取城市信息，并存入数组中
var cityText=$(this).find("Description").text();
arr[i]=cityText;
changetext();
});
},
error:function(){ alert("加载失败"); }
})
//选择不同城市对应信息发生改变
function changetext(){
var _index=olist.find("option:selected").index();
otext.text(arr[_index]);
}
olist.change(changetext)
}
</script>
</body>
</html>

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>