省、市、區 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="width: 130px;">
                <select id="SelProvince" style="width: 100px;">
                    <option>請選擇</option>
                </select>
            </td>
            <td align="center" style="width: 130px;">
                <select id="SelCity" style="width: 100px; display: none; margin-left: 10px;">
                    <option>請選擇</option>
                </select>
            </td>
            <td align="center" style="width: 130px;">
                <select id="SelArea" style="width: 100px; display: none; margin-left: 10px;">
                    <option>請選擇</option>
                </select>
            </td>
        </tr>
    </table>

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

　　勿噴，

  　請多提意見...