3级级联下拉列表 - JQuery

Question

我正在尝试使用jquery在asp.net MVC 4中创建一个3级级联下拉列表。选择第一个下拉列表中的项目会填充第二个下拉列表，但第二个下拉列表中的新值对第三个下拉列表没有影响。有人知道如何解决这个问题吗？非常感谢您的帮助！

我已经单独测试了这两个功能，它们工作正常，只是没有在一起。

<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function getStateNames(BN) {
    $.ajax({
        url: "@Url.Action("StateNames", "DropDownlist")",
        data: {CountryName: CN},
        dataType: "json",
        type: "POST",
        error: function() {
            alert("An error occurred.");
        },
        success: function(data) {
            var items = "";
            $.each(data, function(i, item) {
                items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
            });

            $("#State").html(items);
        }
    });
}

$(document).ready(function(){
    $("#Country").change(function () {
        var CN = $("#Country").val();

        getStateNames(CN);
    });
});

function getCityNames(SN) {
    $.ajax({
        url: "@Url.Action("CityNames", "DropDownlist")",
        data: { StateName: SN },
        dataType: "json",
        type: "POST",
        error: function () {
            alert("An error occurred.");
        },
        success: function (data) {
            var items = "";
            $.each(data, function (i, item) {
                items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
            });

            $("#CityName").html(items);
        }
    });
}

$(document).ready(function () {
    $("#StateName").change(function () {
        var SN = $("#StateName").val();

        getCityNames(SN);
    });
});