MVC 5-将下拉选项设置为在准备就绪的文档中选中后，为什么会重置？

Question

In my MVC 5 application, I am trying to choose a selection from a dropdown on document ready. This is on an edit view that gets populated with values depending on the chosen item. The FillLocations function is basically a way to fill up the Location dropdown with values depending on which facility is selected. I set up an alert to pop up to confirm that there is the selection I am trying to make in the list of options, and it works as expected. I even see the option being selected for a very quick moment before it chooses the empty default option.

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

The code after your call to FillLocations is running before FillLocations() is finished and has populated the select. Try moving the code into the ajax success function like so:

$(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.");
                    }
                });
            }
        });
    }
}