省、市、区 jQuery级联

JQuery代码...

$(document).ready(function () {
    //加载省份列表信息
    $.ajax({
        url: "../Area.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("province").each(function () {                                                  //找到(province)省份节点;
                $("<option></option>").html($(this).attr("name")).appendTo("#SelProvince");             //加载(province)省份信息到列表中
            })
        }
    })
    //省份列表信息更改时，加载城市列表信息
    $("#SelProvince").change(function () {
        var value = $("#SelProvince").val();                                                            //省份值;
        if (value != "请选择") {
            $("#SelCity").css("display", "block").find("option").remove();                              //显示城市下拉列表框删除城市下拉列表中的数据;
            $("#SelCity").html("<option>请选择</option>");                                              //加载城市列表中的请选择;
            $("#SelArea").find("option").remove();                                                      //删除地区下拉列表中的数据;
            $("#SelArea").html("<option>请选择</option>")                                               //加载地区列表中的请选择;
            $.ajax({
                url: "../Area.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find("[name='" + value + "']").find("city").each(function () {               //根据省份name属性得到子节点City节点name属性;
                        $("<option></option>").html($(this).attr("name")).appendTo("#SelCity");         //加载City(城市)信息到下拉列表中;
                    })
                }
            })
        }
    })
    //城市列表信息改变时，加载地区列表信息
    $("#SelCity").change(function () {
        var value = $("#SelCity").val();                                                                //城市值;
        if (value != "请选择") {
            $("#SelArea").css("display", "block").find("option").remove();                              //显示地区下拉列表框删除地区下拉列表中的数据;
            $("#SelArea").html("<option>请选择</option>");                                              //加载地区列表中的请选择;
            $.ajax({
                url: "../Area.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find("[name='" + value + "']").find("country").each(function () {            //根据城市节点name得到子节点Area节点name属性;
                        $("<option></option>").html($(this).attr("name")).appendTo("#SelArea");         //加载到Area(地区)下拉列表中;
                    })
                }
            })
        }
    })
});

Html代码...

<table style="border: 1px solid gray">
        <tr>
            <td align="center" style=" 130px;">
                <select id="SelProvince" style=" 100px;">
                    <option>请选择</option>
                </select>
            </td>
            <td align="center" style=" 130px;">
                <select id="SelCity" style=" 100px; display: none; margin-left: 10px;">
                    <option>请选择</option>
                </select>
            </td>
            <td align="center" style=" 130px;">
                <select id="SelArea" style=" 100px; display: none; margin-left: 10px;">
                    <option>请选择</option>
                </select>
            </td>
        </tr>
    </table>

 　　XML文件：https://files.cnblogs.com/guyg/Area.xml

　　勿喷，

  　请多提意见...