Select2：选择新标签后更新选项

Posted 2023-05-07

【中文标题】Select2：选择新标签后更新选项

【英文标题】：Select2: Update option after selecting new tag

【发布时间】：2016-03-14 00:26:55

【问题描述】：

我实现了一个标签系统，您可以在其中选择现有标签或添加新标签。选择新标签后，它将使用 AJAX 调用保持不变。

为了实现这一点，我使用了回调 createTag 和事件 select2:select。因为我喜欢仅在选中标签时创建标签，所以如果事件 select2:select 被触发，我会为此进行 AJAX 调用。

问题是我需要使用从将新标签保存到数据库中获得的 ID 更新已创建的 select2 选项。最干净的解决方案是什么？

这是我所拥有的：

$('select.tags').select2(
     tags: true,
     ajax: 
         url: ' path('tag_auto_complete') ',
         processResults: function (data) 
             return 
                 results: data.items,
                 pagination: 
                     more: false
                 
             ;
         
     ,
     createTag: function (tag) 
         return 
             id: tag.term, // <-- this one should get exchanged after persisting the new tag
             text: tag.term,
             tag: true
         ;
     
 ).on('select2:select', function (evt) 
     if(evt.params.data.tag == false) 
         return;
     

     $.post(' path('tag_crrate_auto_complete') ',  name: evt.params.data.text , function( data ) 
        // ----> Here I need to update the option created in "createTag" with the ID
        option_to_update.value = data.id;

     , "json");
 );

【问题讨论】：

您是否尝试过在标签创建后触发更改事件？

@BuddhistBeast 这对我有帮助吗？如果我听这个事件，我的 ID 已经没了？还是我应该听 change 事件而不是 select 事件？

相关***.com/questions/23295168/…

【参考方案1】：

我的问题是我没有将新标签作为<option> 标签添加到本机选择字段。

这是必要的，因为如果确实存在具有此值的 <option> 标记，则 select2 会检查通过 select2.val(values) 设置的值。如果不是，则 select2 会默默地将值从数组中抛出，并设置在底层选择字段中具有相应选项标签的值数组。

这就是它现在正确工作的方式（对于 select2 4.0.x）：

$('select.tags').select2(
     tags: true,
     ajax: 
         url: ' path('tag_auto_complete') ',
         processResults: function (data) 
             return 
                 results: data.items,
                 pagination: 
                     more: false
                 
             ;
         
     ,
     createTag: function (tag) 
         return 
             id: tag.term,
             text: tag.term,
             tag: true
         ;
     
 ).on('select2:select', function (evt) 
     if(evt.params.data.tag == false) 
         return;
     

     var select2Element = $(this);

     $.post(' path('tag_crrate_auto_complete') ',  name: evt.params.data.text , function( data ) 
        // Add html option to select field
        $('<option value="' + data.id + '">' + data.text + '</option>').appendTo(select2Element);

        // Replace the tag name in the current selection with the new persisted ID
        var selection = select2Element.val();
        var index = selection.indexOf(data.text);            

        if (index !== -1) 
            selection[index] = data.id.toString();
        

        select2Element.val(selection).trigger('change');

     , 'json');
 );

最小的 AJAX 响应（JSON 格式）必须如下所示：

[
    'id': '1', 'text': 'foo',
    'id': '2', 'text': 'bar',
    'id': '3', 'text': 'baz'
]

您可以为每个结果添加额外的数据，比如自己渲染带有额外数据的结果列表。

【参考方案2】：

只是为了更新：

新语法是

e.params.args.data.id

不是

e.params.data.id