Set default value of select2 input

mikey

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') });
    }
});
John S

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to set default value on an input box with select2 initialized on it?

From Dev

php - filter_input - set to default value if GET key not set

From Dev

How to set default values in Select2 input with tagging in asp.net mvc

From Dev

Setting the value of a select2 input with jquery

From Dev

Select2 (input) value as object after select item

From Dev

Programmatically set the value of a Select2 ajax

From Dev

Select2, set default value for Single Select Drop down

From Dev

Set default value for arrows in input[number]

From Dev

Select2 clear 'x' button to set default value?

From Dev

Dynamically set the VALUE of an text-INPUT element to default by clicking SELECT option

From Dev

jquery select2 setting input value

From Dev

Set Default Value for input type month

From Dev

select2 show default value in multiple select

From Dev

ReactJS Value of previous input is set by default in new input

From Dev

How to set select value in select2 plugin - jquery

From Dev

How to set ordering for default selected value in jQuery select2 remote select box?

From Dev

Setting the value of a select2 input with jquery

From Dev

Set default Value select AngularJS

From Dev

Codeigniter + Select2 set default value for use in edit forms

From Dev

Set default value for arrows in input[number]

From Dev

Set default value for select in angularjs

From Dev

Dynamically set the VALUE of an text-INPUT element to default by clicking SELECT option

From Dev

select2 show default value in multiple select

From Dev

Laravel 5 set default value to Select2

From Dev

set default selected value in selectize input

From Dev

How to set selected or default value in select2 yii2?

From Dev

How to set default decimal value to input in angularjs

From Dev

Set default value for select input in php

From Dev

Set default css width from input value

Related Related

  1. 1

    How to set default value on an input box with select2 initialized on it?

  2. 2

    php - filter_input - set to default value if GET key not set

  3. 3

    How to set default values in Select2 input with tagging in asp.net mvc

  4. 4

    Setting the value of a select2 input with jquery

  5. 5

    Select2 (input) value as object after select item

  6. 6

    Programmatically set the value of a Select2 ajax

  7. 7

    Select2, set default value for Single Select Drop down

  8. 8

    Set default value for arrows in input[number]

  9. 9

    Select2 clear 'x' button to set default value?

  10. 10

    Dynamically set the VALUE of an text-INPUT element to default by clicking SELECT option

  11. 11

    jquery select2 setting input value

  12. 12

    Set Default Value for input type month

  13. 13

    select2 show default value in multiple select

  14. 14

    ReactJS Value of previous input is set by default in new input

  15. 15

    How to set select value in select2 plugin - jquery

  16. 16

    How to set ordering for default selected value in jQuery select2 remote select box?

  17. 17

    Setting the value of a select2 input with jquery

  18. 18

    Set default Value select AngularJS

  19. 19

    Codeigniter + Select2 set default value for use in edit forms

  20. 20

    Set default value for arrows in input[number]

  21. 21

    Set default value for select in angularjs

  22. 22

    Dynamically set the VALUE of an text-INPUT element to default by clicking SELECT option

  23. 23

    select2 show default value in multiple select

  24. 24

    Laravel 5 set default value to Select2

  25. 25

    set default selected value in selectize input

  26. 26

    How to set selected or default value in select2 yii2?

  27. 27

    How to set default decimal value to input in angularjs

  28. 28

    Set default value for select input in php

  29. 29

    Set default css width from input value

HotTag

Archive