Предварительно загруженные данные Select2 initSelection не отображаются

Я использую select2 для загрузки удаленных данных в выбор, входной тег имеет предварительно загруженный атрибут значения, который указывает на предварительно выбранный параметр, когда я загружаю страницу, он показывает выбор с опцией «Очистить» (x) справа, но данные не показывает.

Это мой код:

    function FormatResult(Consig) {
    return Consig.NomCon;
}

function FormatSelection(Consig) {
    $('#strConNom').val(Consig.NomCon);
    return Consig.NomCon;
}

$("#strCon").select2({
placeholder: "Search",
minimumInputLength: 5,
allowClear: true,
ajax: {
    url: "LoadData.asp",
    dataType: 'jsonp',
    data: function (term, page) {
        return {
            q: term,
            CodCas: $('#strCas').val(),
        };
    },
    results: function (data, page) {
        return {results: data.ConsigNom};
    }
},
initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
        callback(data);
        });
    }
},
formatResult: FormatResult,
formatSelection: FormatSelection,
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});

Как я могу это решить?


javascript jquery-select2
person user2200620    schedule 23.03.2013    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Убедитесь, что в вашей функции initSelection ваш LoadData.asp передает один объект, а НЕ массив, содержащий один объект.

Неправильный:

[{"id": 5, "text":"myValue"}]

Правильный:

{"id": 5, "text":"myValue"}

Вот ваша функция изменена.

initSelection: function(element, callback) {
    var id=$(element).val();
    if (id!=="") {
        $.ajax("LoadData.asp", {
        dataType: 'jsonp',
            data: {
                CodCon: id,
                CodCas: $('#strCas').val(),
            },

        }).done(function(data) { 
            callback(data[0]);
        });
    }
},
person Guillaume Pommier    schedule 03.07.2013

arrow_upward
7
arrow_downward

У меня была аналогичная проблема, и я решил ее, включив атрибут value в html элемента ввода и, конечно же, соответствующий formatSelection и initSelection.

JSON, переданный в select2, имеет два поля: идентификатор и текст.

Вот мой js-код:

$( "#contributorNameSearchId" ).select2({
        placeholder: "Select a contributor",
        containerCssClass: "dropDown",
        minimumInputLength: 3,
        ajax: { 
            url: "getList?t=contributor",
            dataType: 'json',
            data: function (term, page) {
                return {
                    term: term, // search term
                    page_limit: 10,
                };
            },
            results: function (data, page) { 
                return {results: data};
            }
        },
        allowClear: true,
         formatSelection: function(data) { 
            return data.text; 
        },
        initSelection : function (element, callback) {
            var obj= {id:1,text:'whatever value'};
            callback(obj);
        } 
    });

и сам элемент ввода:

<input value="0000" name="contributorNameSearch" id="contributorNameSearchId"/>

Обратите внимание на фиктивное значение атрибута value.

Также есть вероятность, что ваш

callback(data);

вместо этого требуется data.something (хотя ваш FormatSelection кажется в порядке). Проверьте данные, которые возвращаются из вашего LoadData.asp.

Я надеюсь, что это помогает.

person Bill    schedule 28.03.2013
comment
Бесконечно благодарен! Я читал между строк и не вводил фиктивное значение для ввода. В моем случае у меня есть несколько select2 с одним и тем же initSelection: jsfiddle.net/loginet/L5mPx - person Adrian P.; 27.02.2014

arrow_upward
2
arrow_downward

Когда select2 завершит загрузку, напишите следующий код

$(".ajax_select").select2("data", {"id": 5, "text": "Test"});

он установит выбор по умолчанию для select2.

person sanjay.parekh13    schedule 17.07.2014
comment
ты имеешь в виду .select2("val", {"id":5, "text":"Test"}) - person Iftah; 03.08.2014
comment
для предварительно загруженного значения используйте .select2(val, 5); но для динамических данных используйте приведенный выше код. - person sanjay.parekh13; 04.08.2014
comment
разве это не сделало бы его единственным выбором, доступным для избранных? для динамических данных я бы сделал как данные (с полным массивом значений параметров), так и val с одним значением, чтобы установить значение по умолчанию: $(".ajx_select").select2({data: [...]}).select2('val',{...}) - person Iftah; 05.08.2014

arrow_upward
1
arrow_downward

Для меня мне пришлось удалить опцию заполнителя из начальной настройки - может быть полезно для кого-то еще

person Bodkins    schedule 06.03.2014

arrow_upward
0
arrow_downward

После долгих мучений решение следующее

Обратите внимание, объект данных должен иметь тот же ключ, что и ваш repoFormatSelection var data = {id: 1, cardname: "Abolish"};

Вы увидите "текст" во всех ответах, но он должен совпадать с вашими переменными json

и еще одна важная вещь: убедитесь, что вы указали value="0" или какое-то фиктивное значение в скрытом вводе select2

$("#myselect").select2({
    allowClear: true,
    placeholder: "Search for a card",
    minimumInputLength: 3,
    ajax: {
            url: "search.php",
            dataType: 'json',
            quietMillis: 250,
            data: function (term, page) {
              return {
                 q: term, // search term
            };
        },
        results: function (data, page) { 
            return {results: data.items};
        },
        cache: true
    },
    initSelection: function (element, callback) {              
        var data = {id: 1, cardname: "Abolish"};
        callback(data);
    },
    formatResult: repoFormatResult,  
    formatSelection: repoFormatSelection, 
    escapeMarkup: function (m) {
        return m;
    } // we do not want to escape markup since we are displaying html in results
});

    function repoFormatResult(card) {
        var markup = '<div class="row-fluid">';

        if (card.cardimage != '')
        {
           markup += '<div class="span2" style="float:left; margin-right:10px"><a class="qtooltip" href="#" rel="' + card.cardimage + '" ><img src="' + card.cardimage + '" width="50px" /></a></div>';
        }

        markup += '<strong>' + card.cardname + '</strong> <small>' + card.editionname + '</small>'
        markup += '<div style="clear:both;"></div></div>';

        return markup;
    }

    function repoFormatSelection(card) {
        return card.cardname;
    }
person Gajendra Bang    schedule 28.12.2014