解析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>
代碼在ie8及以下版本xml加載失敗。哪位朋友有好的意見歡迎提出。