Как предварительно выбрать значения в select2 multi select?

У меня есть множественный выбор, например:

<select multiple="multiple" class="myList">
        <option value="1" selected="selected">Apple</option>
        <option value="2" selected="selected">Mango</option>
        <option value="3" selected="selected">Orange</option>
</select>

Теперь, помимо тех параметров, которые должны быть выбраны в окне выбора, мне нужна дополнительная функция ajax, которая давала бы значения из удаленного источника.

Вот мой код для select2

$(function(){
    $(".myList").each(function(){

                $(this).select2({
                placeholder: "Search for fruits",
                minimumInputLength: 2,
                multiple: true,
                id: function(e) { 
                return e.id+":"+e.name; },
                ajax: {
                    url: "https://localhost:8443/fruit_search",
                    dataType: 'json',
                    data: function(term, page) {
                        return {
                            q: term
                        };
                    },
                    results: function(data, page) {
                    var frts=[];
                        $.each(data,function(idx,Frt){
                            frts[frts.length]=Frt;
                        });
                        return {
                            results: frts
                        };
                    }
                },
                initSelection: function(element, callback) {
                    var data = [];
                },
                formatResult: formatResult,
                formatSelection: formatSelection
                });
        });

});

Но я получаю сообщение об ошибке:

Ошибка: опция 'id' не разрешена для Select2 при подключении к <select>.

Но когда я использую <input type="hidden">, тогда где я должен хранить предварительно выбранные параметры? Как показать их, когда появится окно select2?

Ответ 1

Если у вас есть только значения, вы можете использовать 'val' для получения предварительно выбранных значений, подобных этому.

var PRESELECTED_FRUITS = [ '1','2','3'];

$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);

Ответ 2

Вы можете использовать функцию "data" для установки начальных значений:

var PRESELECTED_FRUITS = [
    { id: '1', text: 'Apple' },
    { id: '2', text: 'Mango' },
    { id: '3', text: 'Orange' }
];

$('.myList').select2('data', PRESELECTED_FRUITS)

Примечание. Функция "val" - это еще один способ установить начальные значения, но вы указываете только идентификаторы с этой функцией. В этом случае вам придется предоставить функцию initSelection, которая строит объекты из идентификаторов.

Также обратите внимание, что параметр "id" не является единственным параметром, который заставляет вас использовать скрытый ввод. Вы не можете использовать параметр "ajax" с элементом выбора.

Что касается опции "id", я не думаю, что вам это нужно. Просто поместите логику в функцию "результатов" ajax, чтобы он создавал массив объектов, у которых есть правильные свойства id и text, или сервер возвращает объекты с этими свойствами.

jsfiddle demo

Ответ 3

Для заданных значений используйте свойство "val" для предварительной настройки выбранных значений.

$(this).select2({
            val: ["1","2","3"]
    }

Но почему бы не удалить функцию id? Если возможно, вы можете вернуть правильный "идентификатор" с сервера без необходимости использования функции id.

Ответ 4

Вы также можете загрузить значения в HTML:

<select class="selector" multiple="multiple" >
    <option selected value="1">Apple</option>
    <option selected value="2">Mango</option>
    <option selected value="3">Orange</option>
</select>

И подключите к нему select2:

$(".selector").select2({
    width: 'inherit',
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    placeholder: "Search for fruits",
    ajax: {
        delay: 1000,
        url: "/bla_foo",
        dataType: 'json',
        type: "GET",
    }
})

и выберите2 будет предварительно заполнить форму.

Ответ 5

$("#select2").select2('data', {id: '3', text: 'myText'});