select2 Anfangswerte werden ersetzt, wenn ein neuer Wert ausgewählt wird

Question

Unten ist mein Code für eine Select2 Box. Ich brauche Werte (Tags), die bereits einem Datensatz zugewiesen sind, um ihn zu zeigen, dies wird durch die Werte AAA und BBB dargestellt. Dann muss ich in einer Liste von Werten, die ausgewählt werden sollen, eine Anjax-Funktion verwenden, wenn sie neue Werte (Tags) zu den bereits vorhandenen hinzufügen möchten. Alles funktioniert, außer wenn sie einen neuen Wert (Tag) auswählen, um ihn hinzuzufügen, ersetzt er die vorhandenen, verschwinden sie. Ich brauche sie, um zu bleiben.

<select class="myTags" style="width:100%" multiple="multiple"></select> 
<script> 
    function formatResults(item) { 
     if (item.loading) return 'Loading...'; 
     return '<div style="font-size:100%;">'+ 
        '<div style="padding:5px;">'+ 
         '<span style="background-color:##e4e4e4; color:##000000; border:1px solid ##aaa; padding:5px;">'+ 
          item.tag+ 
         '</span>'+ 
         '<span style="padding:5px;">'+ 
          '&nbsp;&nbsp;x&nbsp;&nbsp;'+item.popularity+ 
         '</span>'+ 
         '<p style="margin-bottom:0px;">'+ 
         item.description+ 
         '</p>'+ 
        '</div>'+ 
       '</div>'; 
    } 

    function formatSelection(item) { 
     return item.tag; 
    } 

    jQuery(".myTags").select2({ 
     placeholder: "add a tag, max 20 tags", 
     maximumSelectionLength: 20, 
     minimumInputLength: 2, 
     templateResult: formatResults, 
     templateSelection: formatSelection, 
     initSelection: function (element, callback) { 
      var data = [{ "tag": "AAA", "id": "111" },{ "tag": "BBB", "id": "222" }]; 
      callback(data); 
     }, 
     escapeMarkup: function (markup) { return markup; }, // let select2's custom formatter work 
     ajax: { 
      url: "tags.cfc?method=json_get_valtags", 
      dataType: 'json', 
      data: function (params) { 
       return { 
        q: params.term 
       }; 
      }, 
      processResults: function (data) { 
       return { 
        results: jQuery.map(data, function (item) { 
         return { 
          id: item.UNID, 
          tag: item.TAG, 
          description: item.DESCRIPTION, 
          popularity: item.POPULARITY 
         } 
        }) 
       }; 
      } 
     } 
    }); 
</script> 

Answer 1

ich es herausgefunden. This SO post was very similar to what I needed but I had to tweak it some for my specific scenario.

(1) Ich hatte die select2 data Option hinzufügen ...

data: [{ "tag": "AAA", "id": "112233" },{ "tag": "BBB", "id": "11223344" }], 

(2) Dann nahm ich die gesamte initSelection Funktion aus den Optionen.

(3) Dann habe ich diese nach der select2 Initialisierung an der Unterseite hinzugefügt ...

jQuery(".myTags").val([112233,11223344]).trigger('change'); 

Das ist also das Endergebnis ...

jQuery(".myTags").select2({ 
    data: [{ "tag": "aaa", "id": "112233" },{ "tag": "bbb", "id": "11223344" }], 
    placeholder: "add a tag, max 20 tags", 
    maximumSelectionLength: 20, 
    minimumInputLength: 2, 
    templateResult: formatResults, 
    templateSelection: formatSelection, 
    escapeMarkup: function (markup) { return markup; }, // let select2's custom formatter work 
    ajax: { 
     url: "tags.cfc?method=json_get_valtags", 
     dataType: 'json', 
     data: function (params) { 
      return { 
       q: params.term 
      }; 
     }, 
     processResults: function (data) { 
      return { 
       results: jQuery.map(data, function (item) { 
        return { 
         id: item.UNID, 
         tag: item.TAG, 
         description: item.DESCRIPTION, 
         popularity: item.POPULARITY 
        } 
       }) 
      }; 
     } 
    } 
}); 

jQuery(".cmprotags").val([112233,11223344]).trigger('change');