1

我有这个下拉列表，我正在尝试获取 API 值并选择与其对应的值，但它始终选择第一个选项。

如何从 API 中获取下拉选项的正确值/文本？

视图的下拉列表：

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

泰

接口：

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

2 回答 2

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);
            }
        }
    });
}
于 2020-04-13T16:00:10.540 回答
0

主要问题是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>

于 2020-04-07T11:59:04.637 回答