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

Question

我实现了一个标记系统，您可以从现有标记中选择或添加新标记。选择新标记后，将使用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");
 });

- TiMESPLiNTER

---

你尝试过在标签创建后触发一个change事件吗？ - BuddhistBeast

@BuddhistBeast 这会对我有帮助吗？如果我监听了这个事件，我的ID已经消失了吗？还是应该监听更改事件而不是选择事件？ - TiMESPLiNTER

相关的问题：https://dev59.com/NH_aa4cB1Zd3GeqPyhUL - Ciro Santilli OurBigBook.com

Answer 1

我的问题是我没有将新标签作为<option>标签添加到原生选择字段中。 这是必要的，因为select2通过select2.val(values)检查设置的值是否存在一个具有该值的<option>标签。如果不存在，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'}
]

您可以为每个结果添加额外的数据，以便在其中包含附加数据的结果列表中进行自定义渲染。

- TiMESPLiNTER

Answer 2

更新一下：

新的语法是

e.params.args.data.id

不是

e.params.data.id

- A.Z. Soft