使用由 ajax 查询填充的数组填充 Select2 select 框

Question

我想将 Select2 用于 select 框，通过对 api 的 ajay 查询填充，只需调用 api。无需在每次击键后再次查询 api。

我尝试使用这个线程来实现它：但下班后我仍然无法让它工作 -.-

我的代码：

<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 returns:

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

我尝试用 select2 ajax 调用填充 select 框，它起作用了。但我无法让它工作，因此它只进行 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') 并再次使用数据重新初始化 select。

使用由 ajax 查询填充的数组填充 Select2 select 框

filling a Select2 select box with an array populated by an ajax query

javascript

jquery-select2

angularjs-select2