Select2 & Ajax - 使用 select2 + ajax + 多个选项加载值答案

【问题标题】：Select2 & Ajax - Load values with select2 + ajax + multiple optionSelect2 & Ajax - 使用 select2 + ajax + 多个选项加载值
【发布时间】：2017-06-25 07:51:36
【问题描述】：

我试图在我的 select2 组件中显示一些信息，但它不能 100% 工作。

经过几个小时的搜索，我做到了：

    <div class="row">
        <div class="col-md-12">
            {!! Form::label('lblRequisitos', 'Selecione os Requisitos') !!}
            {!! Form::select('requisitos[]', $requisitosVaga, null, ['id'=>'requisito', 'class'=>'form-control js-states', 'multiple' => 'multiple']) !!}
        </div>
    </div>

@push('scripts')
<script>
    $(function()
    {
        $('#requisito').select2(
        {
            placeholder: "Escolha a habilidade...",
            minimumInputLength: 2,
            ajax:
            {
                url: '{{route('pesquisa-habilidade')}}',
                dataType: 'json',
                data: function (params)
                {
                    return {q: $.trim(params.term)};
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                },
                cache: true
            },
            initSelection : function (element, callback) {
                var data = [];
                $(element).find("option").each(function () {
                    data.push({id: $(this).val(), text: $(this).text()});
                });
                callback(data);
            }
        });
    });
</script>
@endpush

有了它，初始加载就ok了。但是当我尝试搜索下一个值时（当我尝试编辑时），它会清除所有选项。

【问题讨论】：

您应该在控制器端显示route('pesquisa-habilidade') 中发生的情况
@phaberest 你好。在服务器端，一切都在 100% 运行。我只是失去了“选定”的东西。我只是添加“$(this).prop('selected', true);”预加载选项，现在可以了。谢谢照顾。

标签： javascript jquery laravel select2

【解决方案1】：

也许这不是最好的解决方案，但我会解决它。

只添加以下行：

//.... At select2 function ...

initSelection : function (element, callback) {
            var data = [];
            $(element).find("option").each(function () {
                data.push({id: $(this).val(), text: $(this).text()});

                // ADD this line to put the option selected
                $(this).prop('selected', true); 
            });
            callback(data);
        }
// ....

现在，它正在 100% 工作。

谁有更好的解决方案？

【讨论】：

你在浏览器控制台中得到了什么？
你好@HasanAl-Natour。我没有错误消息。当我在 select2 上放一个新项目时，选项很干净。现在可以了。但我不认为我的解决方案是“可以接受的”，就像一个好的做法。
您的问题我不清楚，但您添加的行是一次选择所有选项，因此这不是一个好习惯。
@HasanAl-Natour，当我调用 initSelection 时，我只有预先选择的选项（通过变量 $requisitosVaga）。在这个选择中，我有一个 ajax，因为它在 20k 寄存器上搜索。并且只加载预先选择的选项来显示，其他的都由ajax加载。