Select2: come impostare i dati dopo init?

Question

Ho bisogno di impostare una matrice di dati dopo l'inizializzazione select2. Quindi voglio fare qualcosa di simile:

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

Ma ottengo il seguente errore:

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

mio HTML:

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

Cosa devo usare al posto di un elemento di selezione?

ho bisogno di impostare la fonte di articoli per la ricerca

Answer 1

In onload:

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

Answer 2

Fai un elemento <input type="hidden"> e si legano a quel select2. L'uso di .select2 in una normale casella di selezione non ti consente di giocare con i dati, ma ti offre solo l'interfaccia utente e i metodi di post-selezione.

Fonte: Select2 Documentation

Answer 3

Per v4 dovrete distruggere e ricostruire select2 con i dati aggiornati. Check https://github.com/select2/select2/issues/2830

Answer 4

Recentemente ho avuto lo scenario in cui la modifica di un oggetto select2 altera il contenuto di un secondo (gruppi genitore-figlio in modo efficace). Ho usato una chiamata ajax per recuperare un nuovo set di dati Json, che è stato poi prelevato dal secondo oggetto select2. Ho incluso il codice qui sotto:

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

ho scoperto che ho dovuto includere il $ ("# groupchild") html ('') in ordine di sgombrare la precedente serie di dati nel secondo select2. . Spero che questo ti aiuti.

Answer 5

Fonte: 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'); 

articoli chiaro:

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