Программный выбор select2, который извлекает данные через Ajax

Я использую select2 version 4.0, и я пытаюсь сделать программный выбор в поле выбора, которое получает свои данные из вызова ajax.

В документации я нашел, как установить значение программным путем на обычный select2, но я не могу понять, как это сделать с помощью выбора ajax.

Если я правильно помню, в старой версии вы можете установить текущее значение, передав данные select2 с помощью этой команды:

jQuery("selectbox").select2("data", data)

Я пробовал это и отправил объект данных с идентификатором, текстом и результатом, но ничего не происходит, и когда я запрашиваю статус окна выбора, чтобы увидеть выбранные значения, он возвращает null.

Была ли эта опция удалена или просто изменена? Где я могу найти это в документации или как я могу достичь желаемого поведения?

Ответ 1

Единственный способ добиться этого - сначала добавить <option> в select dom с данными, которые вы хотите выбрать, и сразу же выбрать его так, как если бы вы делали это с помощью обычного окна выбора. Это был официальный ответ от кевина-коричневого также на странице проекта github.

https://github.com/select2/select2/issues/3273

Итак, в основном, если вы знаете, что бы вы хотели выбрать, вы можете легко создать из него элемент <option>, добавить его в исходное поле выбора и затем выбрать его по его значению:

var option=jQuery("<option>").attr("value","your_id_here").html("your_text_here");
jQuery("selectbox").append(option);
jQuery("selectbox").val("your_id_here").trigger("change");

Ответ 2

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

$('#select2-control-id').val('item-id').trigger('select2:select').trigger('change');

Это работает, только если select2 уже загрузил элемент, который вы запрашиваете, т.е. тот, на который вы уже нажали.

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

Это похоже на то, что он добавляет <options> к базовому элементу select, когда вы на самом деле нажимаете на них.

Я не вижу способа программно сказать select2 для загрузки первой страницы результатов AJAX.

Ответ 3

Легко манипулировать скрытым полем <select/> как:

//set first option as selected 
$("select [value='0']").attr("selected","selected");
$("select").trigger("change");

Демо

Ответ 4

Вы можете попробовать это.

    var dataString = 'id='+$value;
    var promise = sendAjaxFunction('load_form.php?k=1',dataString);
    $("#LoadMachine").html("<img src='images/ajax-loader.gif' />");
    promise.success(function (data) {
        $("#LoadMachine").html(data);
        $("#MachineName").select2({
            placeholder: 'Select Operation Name ...',
            allowClear: true
        });
        return false;
    });

Загрузите данные в Div #LoadMachine и в результате вы можете загрузить select2.