用ajax查询填充的数组填充Select2选择框

Question

我想将Select2用于选择框，该选择框由对API的ajay查询（只需一次调用该API）填充。 每次击键后都无需再次查询api。

我尝试使用以下线程来实现它： 如何通过ajax预加载数组并将其用于select2？ 但下班后我仍然无法正常工作-.-

我的代码：

 <script type="text/javascript"> $(document).ready(function() { var linkableSystems = []; $.ajax({ url: 'ulrHere' }).done(function(data) { linkableSystems = data.results; console.log(linkableSystems); $('#SelectLinkedSystemToAdd').select2('enable', true); }); $('#SelectLinkedSystemToAdd').select2({ dataType: 'json', data: function () { return { results: linkableSystems }; } }, console.log(linkableSystems) ).select2('enable', false); }); </script> 

 <select id="SelectLinkedSystemToAdd" class="form-control"></select> 

api返回：

{
    "results": [
        {
            "text": "demo CLIENT 1",
            "id": 1
        },
        {
            "text": "demo CLIENT 2",
            "id": 2
        }
    ]
}

我试图用select2 ajax调用填充选择框，它可以工作。 但我无法使其正常工作，因此只能执行1个api调用。 根据控制台， linkableSystems首先是空的：

[]
​length: 0

然后由ajax请求填充：

(2) […]
​0: Object { text: "demo CLIENT 1", id: 1 }
​1: Object { text: "demo CLIENT 2", id: 2 }

可悲的是，Select2没有如我上面链接的线程所建议的那样吸收这些更改。

谁能帮我这个忙吗？ 如果您需要更多信息，请询问！

谢谢！

Answer 1

请记住，这些请求是异步的。

$.ajax({
  url: 'ulrHere'
}).done(function(data) {
  $('#SelectLinkedSystemToAdd').select2({data: data.results});
});

应该可以解决问题，因为当数据实际可用时，您将更新select2。 如果您在select2有时还不太灵活之前就对其进行了初始化。 您可能需要执行$('#SelectLinkedSystemToAdd').select2('destroy')然后再次使用数据重新初始化选择。