javascript - AJAX 请求后提供 Select2 数据

Question

我尝试在 AJAX 调用后向 Select2 下拉列表提供数据。但是，即使 AJAX 调用完美运行并返回预期结果，下拉列表似乎也没有获取任何数据。这是代码。请注意，下拉列表位于名为 #dialog-create-circle 的 JQuery UI 模态中，并且仅当该模态被创建时才会创建 Select2 元素。单击按钮#createCircle 打开。我观察到，即使我在 AJAX 调用有足够的时间完成后打开模式，数据仍然没有加载到 Select2 下拉列表中。我非常感谢对此的帮助。

var availableTags=[];

$.ajax({
    'url': '{{site.uri.public}}/getUserList', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {}, 
    'success': function(data) {
        availableTags=data;                 
    },
    'error': function(data) {  
    }
});

$( "#createCircle" ).click(function() {

      $( "#dialog-create-circle").dialog( "open" );


      $("#dropdown").select2({
        data: availableTags
      });

});  

Answer 1

正如 @Lucas Costa 所建议的，将 ajax 包装在一个函数中并在需要时调用是一种选择。这样您还可以传递任何内容，例如其他元素或网址等:

function fillSelect2(){
  $.ajax({
    'url': '{{site.uri.public}}/getUserList', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {}, 
    'success': function(data) {
        $("#dropdown").select2({
          data: data
        });
    },
    'error': function(data) {  
    }
  });
});

$( "#createCircle" ).click(function() {
  $( "#dialog-create-circle").dialog( "open" ); 
  fillSelect2(); /* dialog now open, $('#dropdown') should be good to fill */
});