Select2: Wie setze ich Daten nach Init?

Question

Ich muss ein Array von Daten nach der Initialisierung von select2 festlegen. Deshalb möchte ich, so etwas machen:

var select = $('#select').select2({}); 
select.data([ 
    {id: 1, text: 'value1'}, 
    {id: 1, text: 'value1'} 
]); 

Aber ich erhalte den folgenden Fehler:

Option 'data' is not allowed for Select2 when attached to a element.;

Mein HTML:

<select id="select" class="chzn-select"></select> 

Was soll ich anstelle eines select-Element verwenden?

Ich brauche die Quelle von Produkten für die Suche

Answer 1

In onload zu setzen:

$.each(data, function(index, value) { 
    $('#selectId').append(
    '<option value="' + data[index].id + '">' + data[index].value1 + '</option>' 
); 
}); 

Answer 2

abgeben <input type="hidden"> Element und binden select2 darauf. Die Verwendung von .select2 in einem normalen Auswahlfeld lässt Sie nicht mit den Daten spielen, sondern gibt Ihnen nur die UI- und Nachauswahlmethoden an.

Quelle: Select2 Documentation

Answer 3

Für v4 musst du select2 mit aktualisierten Daten zerstören und zu rekonstruieren. Überprüfen Sie https://github.com/select2/select2/issues/2830

Answer 4

Ich hatte kürzlich das Szenario, in dem das Ändern eines select2-Objekts den Inhalt einer Sekunde (Eltern-Kind-Gruppierungen effektiv) ändert. Ich benutzte einen Ajax-Aufruf, um eine neue Menge von Json-Daten abzurufen, die dann vom zweiten select2-Objekt aufgenommen wurden. Ich habe den Code unten enthalten:

$("#group").on('change', function() { 
     var uri = "/Url/RetrieveNewResults"; 
     $.ajax({ 
      url: uri, 
      data: { 
       format: 'json', 
       Id: $("#group :selected").val() 
      }, 
      type: "POST", 
      success: function (data) { 
       $("#groupchild").html(''); 
       $("#groupchild").select2({ 
        data: data, 
        theme: 'bootstrap', 
        placeholder: "Select a Type" 
       }); 
      }, 
      error: function() { 
       console.log("Error") 
      } 
     }); 
    }); 

Ich fand, dass ich das $ schließen musste („# groupchild“) html (‚‘), um den vorherigen Satz von Daten in der zweiten select2 zu räumen. . Hoffe das hilft.

Answer 5

Quelle: https://select2.org/programmatic-control/add-select-clear-items

Add item:

var data = { 
    id: 1, 
    text: 'Barn owl' 
}; 

var newOption = new Option(data.text, data.id, false, false); 
$('#mySelect2').append(newOption).trigger('change'); 

löschen Artikel:

$('#mySelect2').val(null).trigger('change');