Select2 4.0.0 начальное значение с помощью AJAX

то, что я сделал, более чистое и должно сделать два массива:

• один содержит список объектов с идентификатором и текстом (в моем случае его идентификатор и имя, в зависимости от вашего templateResult) (его то, что вы получаете от запроса ajax)
• второй-это только массив идентификаторов (стоимость выбора)

Я инициализирую select2, используя первый массив в качестве данных, а второй в качестве val.

пример функции с параметрами a dict of идентификационное имя.

function initMyList(values) {
    var selected = [];
    var initials = [];

    for (var s in values) {
        initials.push({id: s, name: values[s].name});
        selected.push(s);
    }

    $('#myselect2').select2({
        data: initials,
        ajax: {
            url: "/path/to/value/",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    term: params.term,
                    page: params.page || 1,
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;

                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        minimumInputLength: 1,
        tokenSeparators: [",", " "],
        placeholder: "Select none, one or many values",
        templateResult: function (item) { return item.name; },
        templateSelection: function (item) { return item.name; },
        matcher: function(term, text) { return text.name.toUpperCase().indexOf(term.toUpperCase()) != -1; },
    });

    $('#myselect2').val(selected).trigger('change');
}

вы можете передать значение инициалов с помощью ajax-вызовов и использовать jQuery обещает выполнить инициализацию select2.

вопрос о том, чтобы быть вынужденным trigger('change') сводили меня с ума, так как у меня был пользовательский код change триггер, который должен срабатывать только тогда, когда пользователь изменяет параметр в раскрывающемся списке. ИМО, изменение не должно запускаться при установке значения инициализации в начале.

я копнул глубоко и нашел следующее:https://github.com/select2/select2/issues/3620

пример:

$dropDown.val(1).trigger('change.select2');

один сценарий, который я не видел, чтобы люди действительно отвечали, - Это как иметь предварительный выбор, когда параметры AJAX sourced, и вы можете выбрать несколько. Поскольку это страница перехода для предварительного выбора AJAX, я добавлю свое решение здесь.

$('#mySelect').select2({
    ajax: {
        url: endpoint,
        dataType: 'json',
        data: [
            { // Each of these gets processed by fnRenderResults.
                id: usersId,
                text: usersFullName,
                full_name: usersFullName,
                email: usersEmail,
                image_url: usersImageUrl,
                selected: true // Causes the selection to actually get selected.
            }
        ],
        processResults: function(data) {

            return {
                results: data.users,
                pagination: {
                    more: data.next !== null
                }
            };

        }
    },
    templateResult: fnRenderResults,
    templateSelection: fnRenderSelection, // Renders the result with my own style
    selectOnClose: true
}); 

если вы используете templateSelection и ajax, некоторые из этих других ответов могут не работать. Кажется, что создание нового option элемент и задание value и text не будет удовлетворять метод шаблона, когда ваши объекты данных используют другие значения, чем id и текст.

вот что сработало для меня:

$("#selectElem").select2({
  ajax: { ... },
  data: [YOUR_DEFAULT_OBJECT],
  templateSelection: yourCustomTemplate
} 

Проверьте jsFiddle здесь:https://jsfiddle.net/shanabus/f8h1xnv4

в моем случае, я должен был processResults в так как мой данные не содержали необходимого id и text поля. Если вам нужно сделать это, вам также нужно будет запустить свой первоначальный выбор через ту же функцию. Вот так:

$(".js-select2").select2({
  ajax: {
    url: SOME_URL,
    processResults: processData
  },
  data: processData([YOUR_INIT_OBJECT]).results,
  minimumInputLength: 1,
  templateSelection: myCustomTemplate
});

function processData(data) {
  var mapdata = $.map(data, function (obj) {      
    obj.id = obj.Id;
    obj.text = '[' + obj.Code + '] ' + obj.Description;
    return obj;
  });
  return { results: mapdata }; 
}

function myCustomTemplate(item) {
     return '<strong>' + item.Code + '</strong> - ' + item.Description;
}

это работает для меня ...

Не используйте jQuery, только HTML: создайте Параметр Значение будет отображаться как избранные. Если ID это select2 data он будет выбран автоматически.

<select id="select2" name="mySelect2">
  <option value="mySelectedValue">
        Hello, I'm here!
  </option>
</select>

Select2.org -предварительно выбранные значения по умолчанию

проведя несколько часов в поисках решения, я решил создать свой собственный. Он это:

 function CustomInitSelect2(element, options) {
            if (options.url) {
                $.ajax({
                    type: 'GET',
                    url: options.url,
                    dataType: 'json'
                }).then(function (data) {
                    element.select2({
                        data: data
                    });
                    if (options.initialValue) {
                        element.val(options.initialValue).trigger('change');
                    }
                });
            }
        }

и вы можете инициализировать выбор с помощью этой функции:

$('.select2').each(function (index, element) {
            var item = $(element);
            if (item.data('url')) {
                CustomInitSelect2(item, {
                    url: item.data('url'),
                    initialValue: item.data('value')
                });
            }
            else {
                item.select2();
            }
        });

и конечно, вот HTML:

<select class="form-control select2" id="test1" data-url="mysite/load" data-value="123"></select>

Я добавляю этот ответ в основном потому, что я не могу прокомментировать выше! Я обнаружил, что это был комментарий @Nicki и ее jsfiddle,https://jsfiddle.net/57co6c95/, что в конечном итоге заставило это работать на меня.

среди прочего, он привел примеры формата для необходимого json. Единственное изменение, которое я должен был сделать, это то, что мои первоначальные результаты были возвращены в том же формате, что и другой вызов ajax, поэтому мне пришлось использовать

$option.text(data[0].text).val(data[0].id);

, а не

$option.text(data.text).val(data.id);

создать простой ajax комбо с de начальное значение seleted для select2 4.0.3

<select name="mycombo" id="mycombo""></select>                   
<script>
document.addEventListener("DOMContentLoaded", function (event) {
    selectMaker.create('table', 'idname', '1', $("#mycombo"), 2, 'type');                                
});
</script>  

библиотека .js

var selectMaker = {
create: function (table, fieldname, initialSelected, input, minimumInputLength = 3, type ='',placeholder = 'Select a element') {
    if (input.data('select2')) {
        input.select2("destroy");
    }
    input.select2({
        placeholder: placeholder,
        width: '100%',
        minimumInputLength: minimumInputLength,
        containerCssClass: type,
        dropdownCssClass: type,
        ajax: {
            url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type,
            type: 'post',
            dataType: 'json',
            contentType: "application/json",
            delay: 250,
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data.items, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            }
        }
    });
    if (initialSelected>0) {
        var $option = $('<option selected>Cargando...</option>').val(0);
        input.append($option).trigger('change'); // append the option and update Select2
        $.ajax({// make the request for the selected data object
            type: 'GET',
            url: 'ajaxValues.php?getQuery=true&table=' + table + '&fieldname=' + fieldname + '&type=' + type + '&initialSelected=' + initialSelected,
            dataType: 'json'
        }).then(function (data) {
            // Here we should have the data object
            $option.text(data.items[0].name).val(data.items[0].id); // update the text that is displayed (and maybe even the value)
            $option.removeData(); // remove any caching data that might be associated
            input.trigger('change'); // notify JavaScript components of possible changes
        });
    }
}
};

и на стороне php сервера

<?php
if (isset($_GET['getQuery']) && isset($_GET['table']) && isset($_GET['fieldname'])) {
//parametros carga de petición
parse_str(file_get_contents("php://input"), $data);
$data = (object) $data;
if (isset($data->term)) {
    $term = pSQL($data->term);
}else{
    $term = '';
}
if (isset($_GET['initialSelected'])){
    $id =pSQL($_GET['initialSelected']);
}else{
    $id = '';
}
if ($_GET['table'] == 'mytable' && $_GET['fieldname'] == 'mycolname' && $_GET['type'] == 'mytype') {

    if (empty($id)){
        $where = "and name like '%" . $term . "%'";
    }else{
         $where = "and id= ".$id;
    }

    $rows = yourarrayfunctionfromsql("SELECT id, name 
                    FROM yourtable
                    WHERE 1 " . $where . "
                    ORDER BY name ");
}

$items = array("items" => $rows);
$var = json_encode($items);
echo $var;
?>

для простого и семантического решения я предпочитаю определять начальное значение в HTML, например:

<select name="myfield" data-placeholder="Select an option">
    <option value="initial-value" selected>Initial text</option>
</select>

поэтому, когда я называю $('select').select2({ ajax: {...}}); начальное значение initial-value и его вариант текста Initial text.

моя текущая версия Select2 4.0.3, но я думаю, она имеет большую совместимость с другими версиями.

Привет почти бросил это и вернулся к выбору 3.5.1. Но в конце концов я получил ответ!

$('#test').select2({
    placeholder: "Select a Country",
    minimumResultsForSearch: 2,
    ajax: {
        url: '...',
        dataType: 'json',
        cache: false,
        data: function (params) {
                var queryParameters = {
                    q: params.term
                }
                return queryParameters;
        },
        processResults: function (data) {
            return {
                results: data.items
            };
        }
    }
});

var option1 = new Option("new",true, true);

$('#status').append(option1);

$('#status').trigger('change');

просто убедитесь, что новый параметр является одним из параметров select2. Я получаю это от json.