Abhängige Listen keine Ajax

Question

Ich verwende select2 v4 und versuchen, abhängige Listen mit lokalen (bereits geladenen) Möglichkeiten zu machen.

var list1 = [ 
    {id: 42, name: 'xxx'}, 
    {id: 43, name: 'yyy'} 
]; 

var list2 = [ 
    {id: 1, name: 'aaa', list1: 42}, 
    {id: 2, name: 'bbb', list1: 42}, 
    {id: 3, name: 'ccc', list1: 43}, 
    {id: 4, name: 'ddd', list1: 43} 
] 

Ich würde list2 gerne auf abzuhängen list1

Ich habe versucht, einen Rückruf auf data zu verwenden:

$('#list1').select2({ 
    data: list1 
}); 

$('#list2').select2({ 
    data: function() { 
     var list2_filtered = $.grep(list2, function (choice) { 
      return choice.list1 == $('#list1').val(); 
     }); 
     return list2_filtered; 
    } 
}); 

aber es scheint nicht genannt zu werden.

Warum wird meine Rückruffunktion nie aufgerufen?
Wie kann ich diese lokalen Listen abhängig machen?

Answer 1

Ein select2 Daten zu aktualisieren ist eine ziemlich bekannte issue.

So implementiert ich mein eigenes "Datenaktualisierungsprogramm":

function refreshSelect($input, data) { 
    $input.html($('<option />')); // if a default blank is needed 
    for (var key in data) { 
     var $option = $('<option />') 
      .prop('value', data[key]['id']) 
      .text(data[key]['text']) 
     ; 
     $input.append($option) 
    } 
    $input.trigger('change'); 
} 

Hier ist, wie es zu benutzen:

<select id="my_select_input"></select> 

var $input = $('#my_select_input'); 

var data = [ 
    { 
     id: 42, 
     text: 'XX' 
    }, 
    { 
     id: 43, 
     text: 'YY' 
    } 
]; 

refreshSelect($input, data); 

Es funktioniert mit und ohne select2