How to template preselected values of Select2

Question

I am preselcting values of Select2 as like below.

function formatState(state) {

    console.log(state.text2) // I found undefined here.

    console.log('hello') // This is called when values are populating.

    if (!state.id) { return state.text; }
    var output = $('<span class="tooltip" title="' + state.text2 + '">' + state.text + '</span>');   // I would like to template here. 
    return output;
};

function resultfucntion(state) {
    if (!state.id) { return state.text;}
    var $state = $('<span>' + state.text + '('+ state.text1 +')</span>');
    return $state;
};

// Initialise select2
let selectEle = cellEle.children("select").select2({        
    ajax: {
        // more code here
        processResults: function (data) {                
            var options = [];
            if (data) {
                $.each(data, function (index, text) {
                    var user_data = '<table> \
                        <tr> \
                        <td>Organisation</td> \
                        <td>'+text[2][1]+'</td> \
                        </tr> \
                        <tr> \
                        <td>Age</td> \
                        <td>'+ text[2][0]+'</td> \
                        </tr> \
                    </table>';          
                    options.push({ id: index, text: text[0], text1: text[1], text2: user_data });
                });
            }
            return {
                results: options,
                more: false
            };
        },
    },
    templateSelection: formatState,
    templateResult: resultfucntion,
});        

// Above code is working fine

// I am trying to fetch preselected values here

$.ajax({
// more code here
}).then(function (data) {
    if (data) {
        $.each(data, function (index,text) {
            var user_data = '<table> \
                <tr> \
                <td>Organisation</td> \
                <td>'+text[0][1]+'</td> \
                </tr> \
                <tr> \
                <td>Age</td> \
                <td>'+ text[0][0]+'</td> \
                </tr> \
            </table>';

            var opt = new Option(text["text"], text["id"], true, true);
            opt.attr("title", user_data);  // I am trying to add Title here
            selectEle.append(opt); 
        });
    }                
    selectEle.trigger("change");
});

I found when preselected values are populating formatState function is called. But I am getting undefined as value of state.text2.

How can I get value of state.text2 to use as title of preselected values ?

Answer 1

Maybe that template is executed before ajax request, add a condition

if(typeof state.text2 !== 'undefined) { return false; }  

before if (!state.id) { return state.text; } and console after condition

And check after ajax request if you recieve that text