MVC 5 - после установки опции выпадающего списка на готовый документ, почему он сбрасывается?

Question

В моем приложении MVC 5 я пытаюсь выбрать выбор из выпадающего списка готового документа. Это окно редактирования, которое заполняется значениями в зависимости от выбранного элемента. Функция FillLocations - это способ заполнить раскрывающийся список Location значениями в зависимости от того, какое средство выбрано. Я настроил всплывающее предупреждение, чтобы подтвердить, что есть выбор, который я пытаюсь сделать в списке опций, и он работает, как ожидалось. Я даже вижу, что опция выбирается очень быстро, прежде чем она выбирает пустую опцию по умолчанию.

JavaScript:

$(document).ready(function () {
    if ($('#Location').val() == "") {
        FillLocations();
    } else {
        var loc = $('#Location option:selected').text();
        FillLocations();
        $("#Location option").each(function () {
            if ($("#Location").text() == loc) {
                $("#Location").attr('selected', true);
                alert("The selection is there.");
            }
        });
    }
});

function FillLocations() {
    var selectedFacility = $("#Facility").val();

    if ($('#Usage_Status').val() == 2) {
        $.ajax({
            type: "Post",
            url: "@Url.Action("GetLocations", "Item")",
            data: { Facility: selectedFacility },
            dataType: 'json',
            success: function (data) {
                //Clear dropdown data and add new values using ajax
                $('#Location').empty();
                $('#Location').append('<option value=""></option>');
                for (var i = 0; i < data.length; i++) {
                    $('#Location').append('<option value="' + data[i].Value + '">' + data[i].Text + '</option > ');
                }
            }
        });
    }
}

Answer 1

Код после вашего вызова FillLocations выполняется до того, как FillLocations () завершится и заполнит выбор.Попробуйте переместить код в функцию успеха ajax так:

$(document).ready(function () {
    FillLocations();
});

function FillLocations() {
    var selectedFacility = $("#Facility").val();

    if ($('#Usage_Status').val() == 2) {
        $.ajax({
            type: "Post",
            url: "@Url.Action("GetLocations", "Item")",
            data: { Facility: selectedFacility },
            dataType: 'json',
            success: function (data) {
                var loc = $('#Location').val();
                //Clear dropdown data and add new values using ajax
                $('#Location').empty();
                $('#Location').append('<option value=""></option>');
                for (var i = 0; i < data.length; i++) {
                    $('#Location').append('<option value="' + data[i].Value + '">' + data[i].Text + '</option > ');
                }
                $("#Location option").each(function () {
                    if ($(this).attr("value") == loc) {
                        $(this).prop('selected', true);
                        alert("The selection is there.");
                    }
                });
            }
        });
    }
}