jQuery對xml檔案的解析例項

admin發表於2017-02-13
jQueryXML
這是在網路上摘抄的一段jQuery解析xml檔案的例項，在這裡共享一下，希望能夠對需要他的朋友有所幫助。

程式碼如下:

一.HTML程式碼部分:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $.ajax({url:"City.xml", 
  success:function(xml){ 
    $(xml).find("province").each(function(){ 
      var t = $(this).attr("name");//this-> 
      $("#DropProvince").append("<option>"+t+"</option>"); 
    }); 
   } 
})
$("#DropProvince").change(function(){ 
   $("#sCity>option").remove(); 
   var pname = $("#DropProvince").val(); 
   $.ajax({url:"City.xml", 
   success:function(xml){ 
    $(xml).find("province[name='"+pname+"']>city").each(function(){ 
      $("#sCity").append("<option>"+$(this).text()+"</option>"); 
    })
   } 
  }) 
})
}) 
</script>
</head>
<body>
<form id="form1">
  <div>
    <select id="DropProvince" style="width:60px;">
      <option>請選擇</option>
    </select>
    <select id="sCity" style="width:60px;">
    </select>
  </div>
</form>
</body>
</html>

二.XML檔案部分:

[XML] 純文字檢視 複製程式碼
<?xml version="1.0" encoding="utf-8" ?>
<provinces>
  <province name="湖北">
    <city>武漢</city>
    <city>黃石</city>
    <city>宜昌</city>
    <city>天門</city>
  </province>
  <province name="湖南">
    <city>邵陽</city>
    <city>長沙</city>
    <city>岳陽</city>
  </province>
  <province name="廣東">
    <city>廣州</city>
    <city>深圳</city>
  </province>
</provinces>

相關文章