Question

当我使用带有AJAX的Select2时，我试图预先选择一个默认值。

首先，我在页面加载时构建了代码，但由于我的数据库增长到30.000条记录，因此性能变得非常糟糕。所以我尝试使用AJAX，加载和搜索工作完美，但不知何故AJAX打破了我的选择功能，在我使用之前：

$("#remoteDataExample").select2("val", "Option 1");

没有AJAX，这没有问题。但是使用AJAX失败了，这是一个jsfiddle示例：

fiddle

对于非小提琴手，这里是代码：

 $(document).ready(

function () {
    var searchTerm = null;
    // Remote data example
    var remoteDataConfig = {
        placeholder: "Search for an option...",
        minimumInputLength: 3,
        ajax: {
            url: '/echo/json/',
            dataType: 'json',
            data: function (term, page) {
                // Nothing sent to server side. Mock example setup.
                searchTerm = term.toUpperCase();
            },
            results: function (data, page) {
                // Normally server side logic would parse your JSON string from your data returned above then return results here that match your search term. In this case just returning 2 mock options.
                return {
                    results: getMockData()
                };
            }
        },
        formatResult: function (option) {
            return "<div>" + option.desc + "</div>";
        },
        formatSelection: function (option) {
            return option.desc;
        }
    };

    function getMockData() {
        var mockData = [{
            id: 1,
            desc: 'Option 1'
        }, {
            id: 1,
            desc: 'Option 2'
        }];
        var foundOptions = [];

        for (var key in mockData) {
            if (mockData[key].desc.toUpperCase().indexOf(searchTerm) >= 0) {
                foundOptions.push(mockData[key]);
            }
        }

        return foundOptions;
    };

    $("#remoteDataExample").select2(remoteDataConfig);
    });

我不知道现在在哪里放置select2，我尝试将它放在ajax之后，在ajax之后。但似乎没有工作。

Answer 1

您可以在选项中添加以下内容：

initSelection: function (element, callback) {
    callback( { id: 1, desc: 'Option 1' } );
}

并改变：

$("#remoteDataExample").select2(remoteDataConfig);

为：

$("#remoteDataExample").select2(remoteDataConfig).val('Option 1').trigger("change");

选择＆＃39;选项1＆＃39;默认情况下。

updated fiddle

选择2通过ajax加载数据并选择默认值

1 个答案: