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");
 });

Answer 1

我的問題是我沒有將新標簽作為<option>標簽添加到本機選擇字段中。

這是必要的，因為select2將檢查是否存在通過select2.val(values)設置的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'}
]

您可以在每個結果中添加其他數據，例如，自己渲染結果列表，並在其中添加其他數據。

Answer 2

只是更新：

新的語法是

e.params.args.data.id

不

e.params.data.id