Jquery解析XML文件

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>
原文地址:https://www.cnblogs.com/zcttxs/p/2495474.html