Select2 - использовать JSON в качестве локальных данных

Ответ 1

Загрузка данных из локального массива

Веб-страница jquery-select2 с помощью примеры содержат демонстрацию для использования Select2 с локальными данными (массивом).

html

<input type="hidden" id="e10" style="width:300px"/>

javascript

$(document).ready(function() { 

    var sampleArray = [{id:0,text:'enhancement'}, {id:1,text:'bug'}
                       ,{id:2,text:'duplicate'},{id:3,text:'invalid'}
                       ,{id:4,text:'wontfix'}];

    $("#e10").select2({ data: sampleArray });

});

Выберите данные для загрузки2, если массив не имеет текстового свойства

Для вашего вопроса применим пример e10_2

<input type="hidden" id="e10_2" style="width:300px"/>

Чтобы добиться того, что вам нужна функция format(), как показано ниже:

$(document).ready(function() { 

    // tell Select2 to use the property name for the text
    function format(item) { return item.name; };

    var names = [{"id":"1","name":"Adair,James"}
             , {"id":"2","name":"Anderson,Peter"}
             , {"id":"3","name":"Armstrong,Ryan"}]

    $("#e10_2").select2({
            data:{ results: names, text: 'name' },
            formatSelection: format,
            formatResult: format                        
    });

});

Это вывод:

Подсказка

Чтобы увидеть исходный код каждого примера, лучше всего использовать вкладку сети для инструментов chrome dev и взглянуть на источник html до того, как javascript начнет работать.

Ответ 2

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

См. здесь в текстовом блоке "Идентификатор и текстовые свойства строго соблюдаются". Вы должны создать объект $.map в качестве обходного пути.

Более того, работа с [input type = "hidden" ] теперь устарела, поскольку все основные опции select2 теперь поддерживают объект [select] html.

Посмотрите на ответ Джона С. на этот пост.

Ответ 3

Просто добавьте. Это также помогло мне:

HTML:

<select id="names" name="names" class="form-control"></select>

Javascript

$('#names').select2();

var options = $('#names');

$.each(sampleArray, function() {
    options.append($("<option />").val(this.id).text(this.name));
});