InitSelection not work in Select2 4.0.3 js

Question

I am using select2, everithing working fine but default selection not work,

I am using select2 4.0.3 js

I am using initSelection, but its display like this screenshot,

var data = <?php echo $cat_json; ?>;
function templateResult(node) {
    var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
    return $result;
};
function formatSelection(node) {
    return node.sel_text;
};
$("#mySelect").select2({
    initSelection: function (element, callback) {
        var file_id = 29;
        $.ajax({
            url: "/admin/folders/get_selected_cat/" + file_id,
            dataType: "json",
        }).done(function (data) {   
            console.log(data); //Object {id: "1", text: "Product"}
            callback(data.text);
        });
    },
    placeholder: 'Select an option',
    width: "600px",
    tags: true,
    data: data,
    templateSelection: formatSelection,
    templateResult: templateResult,
});

can you please help me to fix this?

thanks

Answer 1

You have to trigger selected value

var selected = [{id: "20"}]; 
var data = <?php echo $cat_json; ?>;
function templateResult(node) {
    var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
    return $result;
}
;
function formatSelection(node) {
    return node.sel_text;
}
;
$("#mySelect").select2({
    placeholder: 'Select an option',
    width: "600px",
    tags: true,
    data: data,
    templateSelection: formatSelection,
    templateResult: templateResult,
});
$('#mySelect').val(selected).trigger('change');

I hope this code will work.

Answer 2

After many tests, for version 4.0.3 this trick worked

initSelection: function (element, callback)
        {
            var id = $(element).val();
            if (id !== "" && id !== 0)
            {
                $.ajax(url,
                        {
                            data: {q: id},
                            dataType: "json"
                        }).done(function (data)
                {
                    $.each(data, function (i, value)
                    {                      
                        input.append('<option value='+value[0].id+' selected>'+value[0].text+'</option>');                    
                        callback({id: value[0].id,text: value[0].text});
                    });
                    ;
                });
            }
        }

Answer 3

This works well for me.. :)

initSelection: function (element, callback)
            {
                var id = $(element).val();
                if (id !== "" && id !== 0)
                {
                    $.ajax("/visits/exam/findings/selected?visit_id=" + $('#visit_id').val(),
                        {
                            data: {q: id},
                            dataType: "json"
                        }).done(function (data)
                    {
                        $.each(data, function (i, value)
                        {
                            $("#basic_exam_findings").append('<option value='+value['id']+' selected>'+value['text']+'</option>');
                            callback({id: value['id'],text: value['text']});
                        });
                        ;
                    });
                }
            }