正在为多个下拉列表选择单个下拉列表值

Question

我有以下代码

    <script type="text/javascript">
$(document).ready(function(){
$(function () {
    $("#CountryId").change(function () {
        $("#StateId").empty();
        $("#CityId").empty();
        var selectedItem = $(this).val();
        var ddlStates = $("#StateId");
        var statesProgress = $("#states-loading-progress");
        statesProgress.show();
        $.ajax({
            cache: false,
            type: "GET",
            url:'@Url.Action("GetStatesByCountryId")',
            data: { "countryId": selectedItem },
            success: function (data) {                       
                ddlStates.html('');
                $.each(data, function (id, option) {
                    ddlStates.append($('<option></option>').val(option.id).html(option.name));
                });
                statesProgress.hide();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('Failed to retrieve states.');
                statesProgress.hide();
            }
        });
    });
});
    $(function () {
        $("#StateId").change(function () {
            $("#CityId").empty();
            var selected = $("#StateId").val();
            var ddlCities = $("#CityId");
            var cityprogress = $("#cities-loading-progress");
            cityprogress.show();
            $.ajax({
                cache: false,
                type: "GET",
                url: '@Url.Action("GetCitiesByStateId")',
                data: { "stateId": selected },
                 success: function (data) {
                     ddlCities.html('');
                     $.each(data, function (id, option) {
                         ddlCities.append($('<option></option>').val(option.id).html(option.name));
                     });
                     cityprogress.hide();
                 },
                 error: function (xhr, ajaxOptions, thrownError) {
                     alert('Failed to retrieve cities.');
                     cityProgress.hide();
                 }
             });
         });
       });
});</script>@Html.LabelFor(model=>model.CountryId)
 @Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, new  {style="width:150px;" })    @Html.LabelFor(model => model.StateId)
 @Html.DropDownListFor(model => model.StateId, Model.AvailableStates,new  {@class="hello", style="width:150px;" })
 <span id="states-loading-progress" style="display: none;">Please wait..</span>
 @Html.LabelFor(model => model.CityId)
 @Html.DropDownListFor(model => model.CityId, Model.AvailableCities,new  {@class="hello1",style="width:150px;" })<span id="cities-loading-progress" style="display: none;">Please wait..</span>

现在我有3个下拉列表。如果我选择dropdownlist1我应该得到国家，我得到了，因此我也应该在第二个下拉列表中获得状态。好吧，直到这里它很好，但是当我想要获得城市时，我根本不会关注城市。我正在使用MVC4和Json方法，因为我在调试代码时可以看到它正在提供国家ID而不是在单击州下拉列表时提供州ID以获取城市。 Plz帮助我，我是jquery的新手。 MVC中的所有代码都很好。谢谢