javascript - Set default value of select2 input - Stack Overflow

admin管理员组

文章数量:1327481

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

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

• javascript
• jquery
• jquery-select2

Share Improve this question Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Dec 15, 2014 at 23:12 mikeymikey 1,46066 gold badges2626 silver badges4848 bronze badges 1

• @Veve I know i even put the link to that answer in my question, my problem is that despite that solution I still can't manage to get a solution. I wanted to see if someone out there could lend me a hand.Still working on it... – mikey Commented Dec 15, 2014 at 23:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I think the reason the code you show does not work is that you are paring 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

本文标签： javascriptSet default value of select2 inputStack Overflow