Получить выбранное значение из API JQuery

Question

У меня есть этот раскрывающийся список, и я пытаюсь получить значение API и выбрать значение, которое соответствует ему, но всегда выбирает первый вариант.

Как получить правильное значение / текст вариант раскрывающегося списка из API?

Раскрывающийся список:

<select class="form-control select2" data-toggle="select2" id="Status" name="Status"></select>

API:

"Success": true,
"Message": "",
"Statuses": [
    {
        "Id": 1,
        "Name": "Nuevo"
    },
    {
        "Id": 2,
        "Name": "Leído"
    },
    {
        "Id": 3,
        "Name": "Atendido"
    }
]

Раскрывающийся список заполнен значениями из API, и у меня есть сетка, в которой я должен обновить статус данных, и при выборе он должен получить значение, которое он имеет из API

Функция для получения всех статусов:

function LoadMailboxStatus() {
    var dropDown = $("#Status");
    dropDown.empty();

    $.ajax({
        type: "GET",
        url: "/Mailbox/GetStatuses/",
        error: (result) => $.Notification.error(result),
        dataType: 'json',
        success: function (result) {
            if (result.Success) {
                var status = result.Statuses;
                $.each(status, function (key, item) {
                    dropDown.append($('<option></option>').attr('value', item.Id).text(item.Name));
                    $('option', this).each(function () {
                        if ($(this).html() == item.Name) {
                            $(this).attr('selected', 'selected')
                        };
                    });
                })
            }
            else {
                $.Notification.error(result.Message);
            }
        }
    });
}

Функции для получения всех значений из другого API для редактирования статуса с помощью предыдущего API:

$dataTable.on("click", "a.edit", function () {
    var $this = $(this);
    $.ajax({
        type: "GET",
        url: "/Mailbox/GetMailboxById/" + $this.data('id'),
        error: (result) => $.Notification.error(result),
        success: function (result) {
            if (result.Success) {
                var mymailbox = result.Mailboxes[0];
                $(FormMB.Id).val(mymailbox.Id);
                $(FormMB.MailboxStatus).val(mymailbox.MailboxStatus);
                LoadMailboxStatus();
            }
            else {
                $.Notification.error(result.Message);
            }
        }
    });

    $mailboxModal.modal();
});

Answer 1

Вам необходимо передать значение, которое вы хотите выбрать, в метод LoadMailboxStatus

$dataTable.on("click", "a.edit", function () {
//...
$(FormMB.Id).val(mymailbox.Id);
$(FormMB.MailboxStatus).val(mymailbox.MailboxStatus);

//change here
//LoadMailboxStatus();
LoadMailboxStatus(mymailbox.MailboxStatus);
//....

и:

function LoadMailboxStatus(selectedName) {
    var dropDown = $("#Status");
    dropDown.empty();

    $.ajax({
        type: "GET",
        url: "/Mailbox/GetStatuses/",
        error: (result) => $.Notification.error(result),
        dataType: 'json',
        success: function (result) {
            if (result.Success) {
                var status = result.Statuses;
                $.each(status, function (key, item) {
     dropDown.append($('<option></option>').attr('selected',(item.Name == selectedName) ? 'selected' : undefined).attr('value', item.Id).text(item.Name));

/*
                    dropDown.append($('<option></option>').attr('value', item.Id).text(item.Name));
                    $('option', this).each(function () {
                        if ($(this).html() == item.Name) {
                            $(this).attr('selected', 'selected')
                        };
                    });
*/
                })
            }
            else {
                $.Notification.error(result.Message);
            }
        }
    });
}

Answer 2

Основная проблема с this:

const dropDown = $("#Status")
dropDown.empty()

const Statuses = [
  { "Id": 1, "Name": "Nuevo"    },
  { "Id": 2, "Name": "Leído"    },
  { "Id": 3, "Name": "Atendido" },
]

$.each(Statuses, function (key, item) {
  dropDown.append($('<option></option>').attr('value', item.Id).text(item.Name))
  console.log("wrong this",  this)
  console.log("no <option>'s found", $('option', this).length)
  console.log("<option>'s found with correct this", $('option', dropDown).length)
  // should be $('option', dropDown), but let it be for now
  $('option', this).each(function () {
    console.log("never called!!!")
    // ...
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control select2" data-toggle="select2" id="Status" name="Status"></select>

Давайте попробуем еще раз с правильным this

const dropDown = $("#Status")
dropDown.empty()

const Statuses = [
  { "Id": 1, "Name": "Nuevo"    },
  { "Id": 2, "Name": "Leído"    },
  { "Id": 3, "Name": "Atendido" },
]

$.each(Statuses, function (key, item) {
  dropDown.append($('<option></option>').attr('value', item.Id).text(item.Name))
  $('option', dropDown).each(function (i, el) {
    console.log("condition =", $(this).html() == item.Name)
    console.log("tring to select", $(this).html(), i)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control select2" data-toggle="select2" id="Status" name="Status"></select>

Так что именно вы пытаетесь выбрать? Прямо сейчас вы пытаетесь выбрать последний вариантов в последовательности, и вы делаете это трижды. (Но ведь ваш исходный код никогда не доходит до этой точки)

Должно быть:

const dropDown = $("#Status")
dropDown.empty()

const Statuses = [
  { "Id": 1, "Name": "Nuevo"    },
  { "Id": 2, "Name": "Leído"    },
  { "Id": 3, "Name": "Atendido" },
]

// some condition you must choose by yourself
function condition(item) { return item.Id === 2 }

$.each(Statuses, function (key, item) {
  const option = $('<option></option>').attr('value', item.Id).text(item.Name)
  dropDown.append(option)
  if(condition(item)) option.attr('selected', 'selected')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control select2" data-toggle="select2" id="Status" name="Status"></select>