Select2: как установить данные после init?

Мне нужно установить массив данных после инициализации select2. Поэтому я хочу сделать что-то вроде этого:

var select = $('#select').select2({});
select.data([
  {id: 1, text: 'value1'},
  {id: 1, text: 'value1'}
]);

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

Параметр "данные" не разрешен для Select2 при присоединении к элементу.;

Мой HTML:

<select id="select" class="chzn-select"></select>

Что следует использовать вместо элемента select?

Мне нужно установить источник элементов для поиска

Ответ 1

В onload:

$.each(data, function(index, value) {
  $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>'
  );
});

Ответ 2

Создайте элемент <input type="hidden"> и привяжите select2 к этому. Использование .select2 в регулярном поле выбора не позволяет вам играть с данными, оно в основном дает вам интерфейс и методы после выбора.

Источник: Select2 Документация

Ответ 3

Для v4 вам придется уничтожать и восстанавливать select2 с обновленными данными. Проверьте https://github.com/select2/select2/issues/2830

Ответ 4

Недавно у меня был сценарий, в котором изменение одного объекта select2 изменяет содержимое второй (группы родитель-ребенок) эффективно. Я использовал вызов ajax для извлечения нового набора данных Json, который затем был захвачен вторым объектом select2. Я включил код ниже:

 $("#group").on('change', function () {
        var uri = "/Url/RetrieveNewResults";
        $.ajax({
            url: uri,
            data: {
                format: 'json',
                Id: $("#group :selected").val()
            },
            type: "POST",
            success: function (data) {
                $("#groupchild").html('');
                $("#groupchild").select2({
                    data: data,
                    theme: 'bootstrap',
                    placeholder: "Select a Type"
                });
            },
            error: function () {
                console.log("Error")
            }
        });
    });

Я обнаружил, что мне нужно было включить $( "# groupchild" ). html (''), чтобы очистить предыдущий набор данных во втором select2. Надеюсь, это поможет.

Ответ 5

Источник: https://select2.org/programmatic-control/add-select-clear-items

Добавить элемент:

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, false, false);
$('#mySelect2').append(newOption).trigger('change');

Очистить элементы:

$('#mySelect2').val(null).trigger('change');