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

Posted 2023-02-24

【中文标题】带有远程数据的 select2 多选中的默认选择选项

【英文标题】：Default selected option in select2 multiple select with remote data

【发布时间】：2021-08-17 01:11:14

【问题描述】：

我正在尝试将默认选择的选项添加到具有远程数据的多个 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;

);

结果如下：

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

我尝试添加像 id: 12, text: metaformin 这样的值来选择，但没有选择默认选项，远程数据不适用于选项，只显示 Json 中的数据而不是远程数据。

我将此作为另一种解决方案，但未选择任何选项。

控制器

$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);
);

【问题讨论】：

我不确定出了什么是错的，但在你的processResult你没有设置text，在选择任何选项时将显示。即：只需在您的 json 中添加 text : obj.fa_name +" :"+obj.en_name return id: obj.id,..

谢谢@Swati，但那部分是在选择之后。并且在选择之后工作正常。我的问题是在选择之前。在选择之前我想要默认选择选项，并且默认选择的选项没有文本，这是错误的。

不管怎样，我试过你说的代码，但是没有用。 @斯瓦蒂

如果你从 ajax 调用中加载 option ..那么，为什么你默认将它们添加到 dom 中？尝试完全删除它们（选择框内的选项）并在 ajax 调用后设置选定的值。请参阅 this 应该会有所帮助。

设置值后也使用trigger('change');。

【参考方案1】：

4 个月后，我找到了答案。问题出在选择 2 的“formatRepoSelection”函数中。我必须将其更改为

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

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

【参考方案2】：

我不知道我是否理解你。您是否尝试将 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 字符串的双引号混淆

【讨论】：

嗨@Chico3001 感谢您的回复。但是对于这些选择的值必须是medium -> id。这部分工作正常。问题是选项的文本显示不正确，只设置了标题。我编辑了我的问题。看第二张照片。默认选择的选项必须类似于“搜索后选择”