Программно установить значение Select2 ajax

Ответ 1

Примечание. Вопрос и этот ответ предназначены для Select2 v3. Select2 v4 имеет совсем другой API, чем v3.

Я думаю, что проблема заключается в функции initSelection. Используете ли вы эту функцию для установки начального значения? Я знаю, что в документации Select2 звучит так, как будто это цель, но она также говорит: "По сути это функция отображения объектов id- > ", и это не то, как вы ее реализовали.

По какой-то причине вызов .trigger('change') вызывает вызов функции initSelection, которая изменяет выбранное значение на "ENABLED_FROM_JS".

Попробуйте избавиться от функции initSelection и вместо этого установите начальное значение, используя:

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

jsfiddle

Примечание: OP предоставил опции formatResult и formatSelection. Как указано, эти функции обратного вызова ожидают, что элементы имеют свойство "label", а не свойство "text". Для большинства пользователей это должно быть:

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

Дополнительная информация о функции initSelection:

Если вы выполните поиск документации Select2 для "initSelection", вы увидите, что он используется, когда элемент имеет начальное значение и когда вызывается функция .val(). Это связано с тем, что эти значения состоят только из id, а Select2 - всего объекта данных (частично для отображения правильной метки).

Если элемент управления Select2 отображал статический список, функцию initSelection можно было бы легко написать (и, похоже, Select2 может предоставить его вам). В этом случае функции initSelection просто нужно будет искать id в списке данных и возвращать соответствующий объект данных. (Я говорю "return" здесь, но он действительно не возвращает объект данных, он передает его функции обратного вызова.)

В вашем случае вам, вероятно, не нужно предоставлять функцию initSelection, так как ваш элемент не имеет начального значения (в html), и вы не будете называть его методом .val(). Просто используйте метод .select2('data', ...) для программного программирования значений.

Если вы должны были предоставить функцию initSelection для автозаполнения (которая использует ajax), вероятно, потребуется сделать вызов ajax для создания объекта данных.

Ответ 2

Обратите внимание, что это было протестировано с версией 4 +

Наконец-то я смог добиться успеха после того, как нашел это обсуждение: https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4

В последнем комментарии отмечен метод, который я смог успешно использовать.

Пример:

$("#selectelement").select2("trigger", "select", {
    data: { id: "5" }
});

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

Ответ 3

Чтобы установить начальные значения, вам нужно добавить тег необходимых параметров в элемент select с помощью jQuery, затем определить эти параметры как выбранные с помощью метода select2 val и, наконец, инициировать событие select2 "change".

1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);

Третий логический аргумент говорит select2 запускать событие изменения.

Для получения дополнительной информации см. https://github.com/select2/select2/issues/3057

Ответ 4

Будьте осторожны, в "подтвержденном" комментарии есть ошибка.

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

Правильный способ

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

Используйте text вместо label

Ответ 5

из их примеров https://select2.github.io/examples.html

Программный доступ:

var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });

Ответ 6

Если вы удалите .trigger('change') из своей скрипты, он регистрируется Object {id: 1, label: "NEW VALUE"} (нужно дважды щелкнуть с тех пор, как ведение журнала до изменения значения). Это то, что вы ищете?

Ответ 7

При использовании select2 с несколькими параметрами используйте эту конструкцию:

$(element).select2("data", $(element).select2("data").concat(newObject), true);

jquery select2 multiple set concatenation

Ответ 8

вот оно:

$("#tag").select2('data', { id:8, title: "Hello!"});

Ответ 9

С версией Select2 4+, на самом деле ничего особенного вам не нужно делать. Будет работать стандартный jQuery с триггером события "change" в конце.

var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || [];    // If you want to merge with existing

$(items).each(function () {
  if(!$select.find("option[value='" + this.id + "']").length) {
    $select.append(new Option(this.text, this.id, true, true));
  }
  data.push(this.id);
});

$select.val(data).trigger('change'); // Standard event notifies select2

В документации по Select2 приведен простой пример: https://select2.org/programmatic-control/add-select-clear-items.

Ответ 10

ДЛЯ ВЕРСИИ 3.5.3

    $(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');

На основе ответа John S. Только вышеизложенное будет работать однако, только если при инициализации select2 параметр initSelection не инициализируется.

$(".select2").select2({
      //some setup
})

Ответ 11

Все, что вам нужно сделать, это установить значение, а затем выполнить: $ ('#myselect').select2 (); или $ ('select').select2 ();. И все очень хорошо обновлено.

Ответ 12

Для тех, кто все еще использует версию 3.5 или даже выше. Пожалуйста, убедитесь, что вы ссылаетесь на select2.js на своей странице. Если вы используете асинхронную или отложенную загрузку. Этот плагин может вести себя по-другому.

Мысль упомянуть.

Ответ 13

В моей ситуации я смог отобразить предварительно выбранную опцию на стороне HTML-сервера с помощью PHP.

Во время загрузки страницы я уже знал значение параметра, поэтому мой <select name="team_search"></select> стал следующим;

        <select name="team_search">
            <?php echo !empty($preselected_team) 
                    ? '<option selected="selected" value="'. $preselected_team->ID .'">' . $preselected_team->team_name . '</option>' 
                    : null ?>
        </select>';

Как вы можете видеть, когда у меня есть доступный $preselected_team я отрисовываю в опции с selected атрибутом, value и набором меток. И, если у меня нет значения, то опция не отображается.

Такой подход не всегда возможен (и в случае с OP не упоминается), но он имеет дополнительное преимущество - готовность к загрузке страницы перед выполнением JavaScript.