City.xml文件:
View Code
<?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>
前端页面:
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery解析xml文件.aspx.cs" Inherits="Jquery解析xml文件" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery解析xml文件</title> <script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#DropProvince").append("<option>请选择</option>"); $.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> </head> <body> <form id="form1" runat="server"> <div> 省份: <select id="DropProvince" style=" 80px;"> </select> 城市: <select id="sCity" style=" 80px;"> </select> </div> </form> </body> </html>