Question

是否可以使用条目的ID以编程方式为使用AJAX进行列表构建的select2选择一个条目？

我在页面中使用select2元素来获取客户端信息。 select2使用AJAX根据用户键入输入来加载客户端名称列表。

一旦用户选择了客户端，我使用client_id发布到后端并运行搜索/生成数据列表，然后将其加载到同一页面的新印象中。

我想使用此client_id预先选择select2并让它显示相关的client_name。如何让基于AJAX的select2选择此client_id？

我的JS和select2代码是：

var resultsArray;
var clientSearch = '{!! $clientSearch !!}';

$(document).ready(function() {

    $('#client_id').select2({
        theme: 'bootstrap',
        placeholder: 'Select client',
        val: clientSearch,  // TRIED THIS BUT IT DOES NOT WORK
        ajax: {
            url: '{!! route('client.selectList') !!}',
            type: 'POST',
            dataType: 'json',
            delay: 500,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                resultsArray = data;
                params.page = params.page || 1;
                return {
                    results: $.map(data, function(obj) {
                        return {
                            id: obj.id, text: obj.client_name + ' (' + obj.state + ' ' + obj.postcode + ')'};
                    }),
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 2
    });

});

我尝试设置val:（按上述方式）并将select2值设置如下，但未成功：

if (clientSearch != null) {
    $('#client_id').select2({'val': clientSearch});
}

if (clientSearch != null) {
    $('#client_id').val(clientSearch).trigger("change");
}

if (clientSearch != null) {
    $("#client_id").select2('data', {id: clientSearch, text: clientName});
}

我还尝试了另一个建议，例如将其添加到select2声明中，如下所示：

    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 2
}).val(clientSearch).trigger('change');

感谢您的任何建议

Answer 1

我得到了answer from here。

if (clientSearch != null) {
    $('#client_id').append('<option value="' + clientSearch + '">' + clientName + '</option>');
    $('#client_id').val($('#client_id').val()).trigger('change');
}

在页面加载时设置使用AJAX的select2的值

1 个答案: