select2 中的默认选择选项，带有远程数据的多个 select

Question

我正在尝试将默认选择的选项添加到具有远程数据的多个 select2 中。 但是设置了标题而不是选项文本。 这是我的代码：

Html

<select class="form-control select_medicines" id="select_medicines" name="medicines[]" multiple="multiple">
    @foreach($medicines as $medicine)
        <option value="{{$medicine->id}}" selected="selected">{{$medicine->fa_name . "(" . $medicine->en_name . ")"}}</option>
    @endforeach
</select>

JS

$(document).ready(function() {
$(".select_medicines").select2({
    ajax: {
        url: 'url',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                search: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            return {
                results: $.map(data.data, function(obj) {
                    return {
                        id: obj.id,
                        fa_name: obj.fa_name,
                        en_name: obj.en_name,
                        is_for_diabetes: obj.is_for_diabetes
                    };
                }),
                pagination: {
                    more: (params.page * 15) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: 'search',
    width: '100%',
    minimumInputLength: 3,
    escapeMarkup: function(markup) {
        return markup;
    },
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepo (repo) {
    if (repo.loading) {
        return repo.text;
    }

    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__meta'>" ;

    markup += "<div class='mt-0 mb-2 text-dark'>";

    if (repo.is_for_diabetes === "1"){
        markup+= "<i class='mdi mdi-star mr-1'></i>";
    }

    markup += repo.fa_name + "(" + repo.en_name + ")";
    markup += "</div>";

    markup += "</div></div>";
    return markup;
}

function formatRepoSelection (repo) {
    return repo.fa_name || repo.en_name;
}
});

这是结果：

选项的标题已设置，但选项的文本为空。 如何设置选项文本？ 默认选择的选项必须显示为“搜索后选择”

我尝试向 select 添加像 {id: 12, text: metaformin} 这样的值，但未选择默认选项，远程数据不适用于选项，仅显示 Json 中的数据而不是远程数据。

我这样做是另一种解决方案，但没有选择任何选项。

Controller

$medicines_id = $user->medicines()->pluck('medicines.id')->all();
$medicines_fa_name = $user->medicines()->pluck('medicines.fa_name')->all();

HTML

<select class="form-control select_medicines" id="select_medicines" name="medicines[]" multiple="multiple"></select>
@if(count($medicines_id) > 0)
    @foreach($medicines_id as $k => $medicine_id)
        <input value='{{json_encode("{id: $medicine_id, text: $medicines_fa_name[$k]}")}}' class="checked_medicines" readonly hidden>
    @endforeach
@endif

这些行已添加到 JavaScript 文件中。

JS

$('.checked_medicines').each(function () {
    var val = $(this).val();
    var json  = JSON.parse(val);
    //json = {id: 12, text: گلی پیزاید}
    $(".select_medicines").select2('data',json);
});

Answer 1

我不知道我是否理解你。 您是否尝试将 JSON 数据存储在选项标签的 value 属性中？

<select class="form-control select_medicines" id="select_medicines" name="medicines[]" multiple="multiple">
    @foreach($medicines as $medicine)
        <option value='{{json_encode($medicine)}}' selected="selected">{{$medicine->fa_name . "(" . $medicine->en_name . ")"}}</option>
    @endforeach
</select>

注意在 value 属性上使用单引号，以避免将其与 JSON 字符串的双引号混淆

Answer 2

4个月后，我找到了答案。 问题出在“formatRepoSelection”function for select 2 中。我必须将其更改为

function formatRepoSelection (repo) {
    return repo.fa_name || repo.en_name || repo.text;
}

我删除了“repo.text”代码，问题是没有显示 label。 现在添加这部分后，问题就解决了。