Как сделать несколько событий onchange в одном представлении

---

У меня есть выпадающий список для страны, штата и города. Страна к государству Javascript onchange работает нормально. Теперь я хочу заполнить выпадающий список городов. Я создал еще одно событие onchange, но оно не работает, и я думаю, что оно не работает, потому что выпадающий список повторно заполняется JavaScript. Исходный выпадающий список перед заполнением-это @Html.DropdownListFor, который заменяется параметром Html, выбранным JavaScript. Мой вопрос заключается в том, как мне перестроить код JavaScript, чтобы я мог добавить выпадающий список городов. Ниже приведен код JavaScript и представление 3-х элементов в представлении.


Спасибо за вашу помощь!

Что я уже пробовал:

Смотреть:

<div class="form-group">
    @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.DropDownListFor(model => Model.Country, Model.Countries, "---Select Country---", new { @class = "form-control", @id = "ddlCountry" })
        @Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
    <div id="State" class="col-md-10">
        @Html.DropDownListFor(model => model.State, new List<SelectListItem>(),"---Select State---", new { @class = "form-control", @id = "ddlState" })
        @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
    <div id="City" class="col-md-10">
        @Html.DropDownListFor(model => model.City, new List<SelectListItem>(), "---Select City---", new { @class = "form-control"})
        @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
    </div>
</div>

язык JavaScript:

<script type="text/javascript">
    $(function () {
        $('#ddlCountry').change(function () {
            $.ajax({
                type: "post",
                url: "/Addresses/GetStates",
                data: { countryId: $('#ddlCountry').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var st = "<select class='form-control' id='ddlState'>";
                    st = st + '<option value="">--Select State--</option>';
                    for (var i = 0; i < data.length; i++) {
                        st = st + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    st = st + '</select>';
                    $('#State').html(st);
                }
            });
        });
    });

    $(function () {
        $('#ddlState').change(function () {
            $.ajax({
                type: "post",
                url: "/Addresses/GetCities",
                data: { stateId: $('#ddlState').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var ct = "<select  class='form-control' id='ddlCity'>";
                    ct = ct + '<option value="">--Select City--</option>';
                    for (var i = 0; i < data.length; i++) {
                        ct = ct + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    ct = ct + '</select>';
                    $('#City').html(ct);
                }
            });
        });
    });
</script>

---