Dependent lists no ajax - jquery-select2-4

Question

I'm using select2 v4 and trying to make dependent lists with local (already loaded) choices.
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}
]
I'd like list2 to depend on list1
I tried to use a callback on data:
$('#list1').select2({
data: list1
});
$('#list2').select2({
data: function () {
var list2_filtered = $.grep(list2, function (choice) {
return choice.list1 == $('#list1').val();
});
return list2_filtered;
}
});
but it does not seem to be called.
Why is my callback function never called ?
How can I make these local lists dependent ?

Answer 1

Refreshing a select2 data is a quite known issue.
So I implemented my own "data updater":
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');
}
Here is how to use it:
<select id="my_select_input"></select>
var $input = $('#my_select_input');
var data = [
{
id: 42,
text: 'XX'
},
{
id: 43,
text: 'YY'
}
];
refreshSelect($input, data);
It works with and without select2