Javascript 三级级联下拉列表-JQuery

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

我已经分别测试了这两个函数，它们工作得很好，只是不在一起

<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);
    });
});

函数getStateNames（BN）{
$.ajax({
url:“@url.Action”（“StateNames”，“DropDownlist”）”，
数据：{CountryName:CN}，
数据类型：“json”，
类型：“POST”，
错误：函数（）{
警报（“发生错误”）；
},
成功：功能（数据）{
var项目=”；
$。每个（数据、功能（i、项）{
项目+=“”+项目。文本+“”；
});
$（“#State”）.html（项目）；
}
});
}
$（文档）.ready（函数（）{
$（“#国家”）。更改（功能（）{
var CN=$（“#国家”）.val（）；
getStateNames（CN）；
});
});
函数getCityNames（序号）{
$.ajax({
url:“@url.Action”（“CityNames”，“DropDownlist”）”，
数据：{StateName:SN}，
数据类型：“json”，
类型：“POST”，
错误：函数（）{
警报（“发生错误”）；
},
成功：功能（数据）{
var项目=”；
$。每个（数据、功能（i、项）{
项目+=“”+项目。文本+“”；
});
$（“#CityName”）.html（项目）；
}
});
}
$（文档）.ready（函数（）{
$（“#StateName”）.change（函数（）{
var SN=$（“#StateName”）.val（）；
getCityNames（SN）；
});
});