從屬列表no ajax

Question

我正在使用select2 v4並嘗試使用本地（已加載）選項製作從屬列表。

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} 
] 

我想list2依靠list1

我試圖用一個回調的data：

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

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

，但它似乎並沒有被調用。

爲什麼我的回調函數從未被調用？
如何使這些本地列表依賴？

Answer 1

刷新select2數據是一個非常有名的issue。

所以我實現了我自己的 「數據更新」：

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'); 
} 

這裏是如何使用它：

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

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

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

refreshSelect($input, data); 

它的工作原理與不選擇2