Установить значение по умолчанию для входа select2

Я использую select2 и немного новичок в этой библиотеке. У меня есть страница, на которой мой вход select2 должен быть установлен на значение по умолчанию, если это значение опубликовано. Вот 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> 

а это мой 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
            }
        })
    }
});

Как я уже сказал, я не могу понять, как установить значение ввода по умолчанию. Я просмотрел это решение, но все равно не удалось заставить его работать. Любая помощь, пожалуйста?

рабочее решение

благодаря Джону, вот как я заработал: 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') });
    }
});

person mikey    schedule 15.12.2014    source источник
comment
@Veve Я знаю, что даже поместил ссылку на этот ответ в свой вопрос, моя проблема в том, что, несмотря на это решение, я все еще не могу найти решение. Я хотел посмотреть, не сможет ли кто-нибудь помочь мне. Все еще работаю над этим...   -  person mikey    schedule 16.12.2014


Ответы (1)


Я думаю, что причина, по которой код, который вы показываете, не работает, заключается в том, что вы сравниваете свойство id объектов в dataArray с value ввода, но value ввода - это название страны, а не идентификатор страны.

Вы должны установить value ввода для идентификатора страны, а не ее имени.

Тогда вы можете избежать использования dataArray и использовать:

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

Это берет id из value входных данных и text из атрибута data-init-text входных данных.

jsfiddle

person John S    schedule 16.12.2014
comment
Это работает просто отлично!! Я использовал массив, потому что использовал его в других случаях, но здесь он мне действительно не нужен. Ваше решение делает мой код более аккуратным, спасибо! У меня был другой способ решить эту проблему, но он был не так хорош, как ваш. - person mikey; 16.12.2014
comment
initSelection устарел в Select2 4.0. Он был заменен методом current в адаптере данных и доступен только в полных сборках. - person Paul T. Rawkeen; 14.08.2015