Select2: jak ustawić dane po init?

Question

Potrzebuję ustawić tablicę danych po zainicjowaniu select2. Więc chcę zrobić coś takiego:

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

Ale pojawia się następujący błąd:

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

Moje HTML:

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

Co należy używać zamiast select elementu?

muszę ustawić źródło elementów poszukiwaniu

Answer 1

dla W onload:

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

Answer 2

Złóż elementu <input type="hidden"> i wiążą select2 do tego. Używanie .select2 na zwykłym polu wyboru nie pozwala ci grać z danymi, w większości daje ci to interfejs i metody po selekcji.

Źródło: Select2 Documentation

Answer 3

Dla v4 musisz zniszczyć i zrekonstruować select2 ze zaktualizowanymi danymi. Check https://github.com/select2/select2/issues/2830

Answer 4

Niedawno miałem scenariusz, w którym zmiana jednego obiektu select2 zmienia zawartość drugiej (efektywne grupowanie rodziców i dzieci). Użyłem wywołania ajax, aby pobrać nowy zestaw danych Json, który został następnie pobrany przez drugi obiekt select2. Podaję poniższy kod:

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

Okazało się, że musiałem obejmują $ („# groupchild”) html („”), aby usunąć poprzedni zestaw danych w drugim Select2. . Mam nadzieję że to pomoże.

Answer 5

Źródło: 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'); 

Pogodne przedmiotów

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