Question

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

我尝试使用以下线程来实现它： How to pre-load an array via ajax and use it for select2? 但下班后我仍然无法正常工作-.-

我的代码：

"ComputerName","Online"
"LocalHost","True"
"10.0.0.1","False"
"127.0.0.1","True"
"BetterNotBeThere","False"
"[MySysName]","True"

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

api返回：

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

我试图用select2 ajax调用填充选择框，并且可以正常工作。但我无法使其正常工作，因此只能执行1个api调用。根据控制台，{ "results": [ { "text": "demo CLIENT 1", "id": 1 }, { "text": "demo CLIENT 2", "id": 2 } ] }首先是空的：

linkableSystems

，然后由ajax请求填充：

[]
length: 0

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

有人可以帮我吗？如果您需要更多信息，请询问！

谢谢！

Answer 1

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

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

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

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

1 个答案: