Как мне запустить новый ajax при событии select2 new/remove tag?

Я использую следующий фрагмент, чтобы добавить новый тег select2 удаленно с помощью ajax, и я хочу зарегистрировать или удалить некоторые записи моего много для многих таблиц на новом теге/удалении тега

Таблица выглядит как

---------------------------------
+--voucher_id--+|+--product_id--+
---------------------------------
+     123       |   566         +
---------------------------------
+     156       |   566         +
---------------------------------
+     123       |   426         +
---------------------------------
+     156       |   516         +
---------------------------------

Мой Javascript

$(".e6").select2({
    tags: true,
    placeholder: 'placeholder',
    minimumInputLength: 1,

    ajax: {
        url: 'searchProducts',
        dataType: 'json',
        data: function(term) {
            return {q: term};
        },
        results: function(data) {
            return {results: data};
        }
    },
    createSearchChoice: function(term, data) {
        if ($(data).filter(function() {
            return this.computername.localeCompare(term) === 0;
        }).length === 0) {
            return {id: term, name: term};
        }
    },
    formatResult: function(item, page) {
        return item.computername;
    },
    formatSelection: function(item, page) {
        return item.computername;
    }
});

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

Выполняя некоторые исследования, мне удалось создать функцию, которая обновляла бы записи в таблице выше и которая работает хорошо sofar

$('.e6').on("change", function(e){                           
    console.log(ids);
    console.log(gs);
    $.ajax({
        type: "POST",
        url: '/admin/?controller=vouchers&action=updateRelatedProducts',
        data: {ids: ids, gs:gs},
        error: function () {
            alert("error");
        }
    });                   
});

Но у меня возникают проблемы с заполнением поля ввода исходными тегами

Ответ 1

Не тестировалось, но должно работать:

$('.e6').on("change", function(e){
    if (e.removed) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {id: e.removed.id, action: remove},    //Or you can e.removed.text
            error: function () {
                alert("error");
            }
        });
    }
    if (e.added) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {id: e.added.id, action: add},    //Or you can e.added.text
            error: function () {
                alert("error");
            }
        });
    }

    //OR you can play with val data instead
    if (e.val) {
        $.ajax({
            type: "POST",
            url: '/admin/?controller=vouchers&action=updateRelatedProducts',
            data: {val: JSON.stringify(e.val)},    //Will send all the selected values
            error: function () {
                alert("error");
            }
        });
    }
}

Ответ 2

Есть ли сценарий, где вы можете опубликовать версию этой проблемы.

Основываясь на том, что я понял, достаточно ли следующего шаблона?

  function dynamicSelect2(id) {
      $.ajax({
          url: 'data-url',
          data: 'parameters',
          dataType: 'json'
      }).done(function () {
          //Create the Select2 with necessary data on the element "id" passed.
      }).always(function () {
          //Attach other events..
      });
  }

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