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

у меня есть автоматический вход Select2 (построенный через SonataAdmin), но я не могу понять, как программно установить его на известную пару ключ/значение.

здесь Скрипка JS здесь это примерно показывает, что у меня есть. Я хочу знать, какую функцию я могу прикрепить к кнопке, чтобы

  • в поле Select2 отображается текст "новое значение" для пользователя и
  • поле Select2 отправит значение "1", когда форма отправляется на сервер

Я пробовал всевозможные комбинации jQuery и Select2 data и val методы, вызываемые против различных входов на странице, но ничего не работает... наверняка есть какой-то способ сделать это?

-- Edit --

принятый ответ ниже очень полезен, помогает пролить свет на правильный способ инициализации выбора и объясняет, для чего предназначен initSelection.

сказав это, кажется, что моей самой большой ошибкой здесь было то, как я пытался вызвать изменения.

Я:

$(element).select2('data', newObject).trigger('change');

но это приводит к пустой add объект внутри события изменения select2.

если вместо этого вы используете:

$(element).select2('data', newObject, true);

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

Я надеюсь, что эта дополнительная информация поможет кому-то еще!

23
javascript jquery jquery-select2 sonata-admin

11 ответов

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

я думаю, что проблема

25

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

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

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

пример:

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

этого, кажется, достаточно, чтобы он соответствовал данным ajax и правильно установил значение. Это очень помогло с пользовательскими данными Адаптеры.

30

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

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

третий логический аргумент сообщает select2 для запуска события change.

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

10

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

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

правильный путь -

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

использовать text вместо label

6

из их примеров 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"); });
3

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

1

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

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

в jQueryselect2несколькоsetобъединение

1

это здесь:

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

С 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

1

ДЛЯ ВЕРСИИ 3.5.3

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

на основе Джон S ' ответ . Просто вышеперечисленное будет работать только если при инициализации select2 initSelection опция не инициализируется.

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

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

0