Default selected option in select2 multiple select with remote data

Question

I am trying to add the default selected option to multiple select2 with remote data. But the title is set instead of the option text. This is my code:

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

and this is the result:

the title of option is set but text of option is empty. how can I set text of option? default selected options must be shown like "select after search"

I try to add value like {id: 12, text: metformin} to select but the default options were not selected and the remote data did not work for the options and only showed the data in Json instead of the remote data.

I did this as another solution but no option was selected.

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

These lines were added to the JavaScript file.

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

I don't know if I understand you well. Are you trying to store JSON data inside the value attribute of the option tag?

<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>

Be careful to use single quotes on the value attribute to avoid mixing it with the dobleqoutes of the JSON string

Answer 2

after 4month I found my answer. the problem was in "formatRepoSelection" function for select 2. I must change it to

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

I had deleted the "repo.text" code and the problem was that the label was not displayed. Now after adding this part, the problem is solved.