Как сохранить мой раскрывающийся дизайн после каскадирования раскрывающегося списка в MVC

Question

У меня проблема с дизайном раскрывающегося списка, когда я выбираю первый раскрывающийся список, второй раскрывающийся список обновляется sh, но дизайн был изменен

После того, как я выберу значение из раскрывающегося списка страны, дизайн раскрывающегося списка провинций может внезапно измениться:

Вот мое мнение

<div class="form-group">
    <label class="control-label col-md-2">Country</label>
    @Html.DropDownListFor(x => x.CountryNames, Model.CountryNames, "--Select--", new { @id = "ddlState", @class = "form-control" })
</div>
<div class="form-group">
    <label class="control-label col-md-2">Province</label>
    <div id="Province">
    @Html.DropDownListFor(x => x.ProvinceNames, new List<SelectListItem>(), "--Select--", new { @id = "ddlProvince", @class = "form-control" })
    </div>
</div>

И это моя функция скрипта:

$(document).ready(function () {
    $('#ddlState').change(function () {
        $.ajax({
            type: "post",
            url: "/ContactAddress/GetProvince",
            data: { stateId: $('#ddlState').val() },
            datatype: "json",
            traditional: true,
            success: function (data) {
                var district = "<select id='ddlProvince'>";
                district = district + '<option value="">--Select--</option>';
                for (var i = 0; i < data.length; i++) {
                    district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                }
                district = district + '</select>';
                $('#Province').html(district);
            }
        });
    });
});

Я меняю свой код вместо. html Я использовал добавление, но моя библиотека провинции не показывает данных

        $('#ddlState').change(function () {
            $.ajax({
                type: "post",
                url: "/ContactAddress/GetProvince",
                data: { stateId: $('#ddlState').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var district = "<select id='ddlProvince'>";
                    district = district + '<option value="">--Select--</option>';
                    for (var i = 0; i < data.length; i++) {
                        district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
                    }
                    district = district + '</select>';
                    $('#dllProvince').append(district);
                }
            });
        });
    });

Answer 1

этот работает для меня, спасибо за решение

    $(document).ready(function () {
        $('#ddlState').change(function () {
            $('#ddlProvince').empty();
            $.ajax({
                type: "post",
                url: "/ContactAddress/GetProvince",
                data: { stateId: $('#ddlState').val() },
                datatype: "json",
                traditional: true,
                success: function (data) {
                    var district = "<select id='ddlProvince'>";
                    district = district + '<option value="">--Select--</option>';
                    for (var i = 0; i < data.length; i++) {
                        $('#ddlProvince').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option>');
                    }
                }
            });
        });
    });

Answer 2

Вы полностью удаляете раскрывающийся список из дерева html и восстанавливаете его, добавляя html в свой div. Лучшим способом было бы удалить текущие параметры, такие как

    $('#ddlProvince')
    .empty();

, а затем добавить параметры. Ваша функция должна выглядеть так.

    success: function (data) {
            var district = "";
            $('#ddlProvince').append('<option value="">--Select--</option>');
            for (var i = 0; i < data.length; i++) {
            $('#ddlProvince').append('<option value=' + data[i].Value + '>' + data[i].Text + '</option>');
            }


        }