Set default value of select2 input

Question

I am using select2 and I am a bit of newbie with this library. I have a page where my select2 input should set to a default value if that value is posted. Here is the html

<!-- COUNTRY -->
<span id="agency_data">
    <input type="hidden" name="country_id" id="filter_country" data-placeholder="Choose A Country Name" data-init-text="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" value="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" />
 </span> 

and this is my jQuery

        //******** COUNTRY ********
if(typeof countryId === 'undefined') {
    countryId = '';
}
if(typeof countryName === 'undefined') {
    countryName = '';
}

var dataArray = [{id:countryId,text:countryName}];

$('#filter_country').select2({
    minimumInputLength: 0,
    allowClear: true,
    ajax: {
        url: base +"/agencyList/search",
        dataType: 'json',
        type: 'POST',
        data: function (term, page) {
            return {
                country: term
            };
        },
        results: function (data, page) {
            return { 
                results: data
            };
        }
    },
    data:dataArray,
    initSelection: function (element, callback) {
        $(dataArray).each(function() {
            if (this.id == element.val()) {
                callback(this);
                return
            }
        })
    }
});

As I said I can't figure out how to set the default value of the input. I have looked at this solution but still couldn't get it to work. Any help please?

working solution

thanks to the john here is how I got it working: html:

<span id="agency_data">
                    <input type="hidden" name="ag_cty_id" id="filter_country" data-placeholder="Choose A Country Name" data-init-text="<?= isset($data['cty_name']) ? $data['cty_name'] : '' ?>" value="<?= isset($data['ag_cty_id']) ? $data['ag_cty_id'] : '' ?>" />
                </span>

jQuery:

    $('#filter_country').select2({
    minimumInputLength: 0,
    allowClear: true,
    ajax: {
        url: base +"/agencyList/search",
        dataType: 'json',
        type: 'POST',
        data: function (term, page) {
            return {
                country: term
            };
        },
        results: function (data, page) {
            return { 
                results: data
            };
        }
    },
    initSelection: function (element, callback) {

        console.log('id elemt: ' + element.val());
        callback({ id: element.val(), text: element.attr('data-init-text') });
    }
});

Answer 1

I think the reason the code you show does not work is that you are comparing the id property of the objects in the dataArray to the value of the input, but the value of the input is a country name, not a country ID.

You should set the value of the input to the country's ID, not its name.

Then you could avoid using the dataArray and use:

initSelection: function(element, callback) {
    callback({ id: element.val(), text: element.attr('data-init-text') });
}

This takes the id from the value of the input and the text from the data-init-text attribute of the input.

jsfiddle