вариант Append для множественного выбора с помощью Ajax

Question

У меня есть следующий HTML множественного выбора кода:

<select class="multi-select" multiple="multiple" id="multiSelectId"> 

И пытаюсь динамически добавлять элементы в нее с помощью Ajax:

function TestFunction(value) { 
    const selectMembers = $("#multiSelectId"); 
    selectMembers.empty(); 
    selectMembers.append('<option value="val">test1</option>'); 
    $.ajax({ 
    url: '@Url.Action("GetMemberById", "SystemAdmin")', 
    data: { 
     'memberId': value 
    }, 
    success: function(data) { 
     selectMembers.append('<option value="val">test2</option>'); 
     alert("test3"); 
    } 
    }); 
    selectMembers.multiSelect('refresh'); 
} 

Так странно Дело в том, что test1 и test3 работают нормально, тогда как test2 вообще не работает, и я не могу найти, почему он не работает. У кого-нибудь есть идея?

Answer 1

Вам необходимо обновить обработчик обратного вызова success. Помните, что ajax() является асинхронным.

function TestFunction(value) { 
    const selectMembers = $("#multiSelectId"); 
    selectMembers.empty(); 
    selectMembers.append('<option value="val">test1</option>'); 
    $.ajax({ 
     url: '@Url.Action("GetMemberById", "SystemAdmin")', 
     data: { 
      'memberId': value 
     }, 
     success: function(data) { 
      selectMembers.append('<option value="val">test2</option>'); 
      selectMembers.multiSelect('refresh'); 
      alert("test3"); 
     } 
    }); 
}