<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jquery xml解析</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> 

city.xml文件

復(fù)制代碼代碼如下:

<?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>

其實主要是注意怎樣在html界面上解析xml文件，格式就是

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function () { 
$.ajax({ 
url: "City.xml", 
success: function (xml) { 
$(xml).find("province").each(function () { 
var t = $(this).attr("name"); 
$("#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> 

就是用$.ajax()調(diào)用xml文件的內(nèi)容。然后$.each()進行循環(huán)操作，基本思想就是這樣的，成功之后去執(zhí)行success這個回調(diào)函數(shù)。這里的xml文件是用來存儲數(shù)據(jù)的，相當于在數(shù)據(jù)庫中讀取文件。

您可能感興趣的文章: