Listy rozwijane zależne Select2

Question

Próbuję użyć wtyczki Select2, aby mieć 4 listy rozwijane, które zależą od siebie nawzajem. Mam problem ze znalezieniem właściwego sposobu aktualizowania danych, które ładują opcje.

Moim celem jest załadowanie nowych danych przez ajax, ale gdy mam go w kliencie, nie jestem w stanie dodać nowych danych do lista wyboru.

Kod Próbowałem jest tutaj:

$(#"a3").select2({ 
    placeholder: "select an item", 
    allowClear: true}).on("change", 
    function (e) { 
     var results = $.get("url?id=2", 
      function (data, textStatus, jqXHR) { 
       $(this).select2({ data: { results: data, text: "Name" } }); 
     }); 
    } 
); 

Jest jeszcze inna kwestia tutaj select2 changing items dynamically ale rozwiązanie nie pracował z Select2 v3.2 ale nie Select2 v3.3

Answer 1

Igor wrócił do mnie z drogi, aby to zrobić

var data=[...];  
$().select2({data: function() {return {results:data};}});  
/// later  
data=[...something else];  
// next query select2 will use 'something else' data 

Answer 2

prawidłowym formacie jest:

.select2("data", {...}) 

Answer 3

Dla Select2 v4.x, tutaj jest mały js class.

Używając tego, opcje pola listy select2 zostaną załadowane/odświeżone przez ajax w oparciu o wybór innego pola listy select2. A zależność może być powiązana.

Na przykład -

new Select2Cascade($('#country'), $('#province'), 'path/to/geocode', {type:"province", parent_id: ''}); 
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''}); 

Sprawdź demo na codepen. Również tutaj jest post na how to use go.