Блог

Я использую select2, чтобы позволить пользователю выбирать несколько параметров. Все работает нормально, за исключением одной неприятной проблемы.

В первый раз, когда я нажимаю кнопку сохранить, чтобы сохранить элементы, это работает. Но затем при последующих вызовах идентификатор элементов заменяется положением элементов. Например, если у меня выбраны идентификаторы 3, 6 и 10, первое сохранение сработает, и 3,6,10 будут переданы контроллеру.

Но затем, если я перезагружу представление и нажму сохранить, будут переданы числа 0,1,2 (т. Е. Их относительные позиции при выборе).

Вот код:

Во-первых, HTML:

 <select id="selectGroup" class="form-control" multiple="true">
  

В $(document).готово:

     // Load Groups
    $("#selectGroup").select2({ placeholder: 'Select' });
    $.ajax({
        url: ROOT_URL   "Group/GroupList",
        type: "GET",
        success: function (data) {

            let dropdown = $('#selectGroup');
            dropdown.empty();
            dropdown.append($('<option></option>').attr('value', 0).text("(Select)"));
            $.each(JSON.parse(data), function (key, entry) {
                dropdown.append($('<option></option>').attr('value', entry.GroupID).text(entry.GroupName));
            })

        },
        error: function (passParams) {
            Notify(passParams, "Unexpected Error Loading Groups", "error");
        }
    });
  

И, наконец, js для сохранения (вызывается с кнопки, которая передается в loanID):

 function LoanGroupSave(loanID) {

    var grpIDs = '';
    [].forEach.call(document.querySelectorAll('#selectGroup :checked'), function (elm) {
        grpIDs  = elm.value   ',';
    })

    var editURL = location.protocol   '//'   location.host   "/Loan/LoanGroupSave";
    //alert(editURL);

    var obj = { "LoanID": loanID, "GroupIDs": grpIDs };

    alert(JSON.stringify(obj));

    $.ajax({
        type: "POST",
        url: editURL,
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
    }).done(function (response) {
        if (response.success) {
            Notify("Group(s) information has been saved", "Saved", "success", false, "toast-top-right", 5000);
        }
        else {
            OpenPopupGeneral("Error(s)", response.message);
        }
    }).fail(function (jqXHR, textStatus, errorThrown) {
        OpenPopupGeneral("Unexpected Error(s)", "Error = "   errorThrown);
    });

}
  

Публикация для людей, которые совершают ту же ошибку.

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

         success: function (data) {
            $.each(JSON.parse(data), function (key, entry) {
                var $newOption = $("<option selected='selected'></option>").val(entry.GroupID).text(entry.GroupName);
                $("#selectGroup").append($newOption).trigger('change');
            }