如何在 select2 new /remove tag 事件上触发新的 ajax？

Posted 2023-05-07

【中文标题】如何在 select2 new /remove tag 事件上触发新的 ajax？

【英文标题】：How do I fire a new ajax on select2 new /remove tag event?

【发布时间】：2014-06-11 06:56:05

【问题描述】：

我使用以下 sn-p 使用 ajax 远程添加新的select2 标签，我想在新标签/删除标签事件中注册或删除我的多对多表的一些记录

表格看起来像

---------------------------------
+--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 中，我也有一个产品 ID，我正在寻找一种在 select2 事件上触发新 ajax 的方法，但我不知道应该在哪里保存或删除表中的数据。

通过一些研究，我已经能够构建一个函数来更新上表中的记录，并且到目前为止效果很好

$('.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");
        
    );                   
);

但我无法使用初始现有标签填充我的输入字段

【问题讨论】：

将 ajax 函数抽象为它自己的函数，然后将其应用于您必须执行的任何 select2 函数。

我不清楚如何在 select2 的情况下捕获删除或添加事件

我刚看了Select2，真是太棒了。将不得不开始使用它！

@No1_Melman 其实和julesjanssen.github.io/chosen很像

【参考方案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");
            
        );
    

【讨论】：

我提出了一个问题，请您看看。 ***.com/questions/35216302/…

【参考方案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 调用之前定义的变量。