Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set default value of select2 input

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') });
    }
});
like image 348
mikey Avatar asked Mar 17 '23 15:03

mikey


1 Answers

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

like image 55
John S Avatar answered Mar 26 '23 01:03

John S