如何在带Ajax数据源的Select2多选框中预选中选项

我在Flask应用的表单内做了一个表格，表格每行包含一个Select2多选下拉框，模板代码如下：

<select name="visible_bonuses[{{ country.id }}]" class="bonus-multi-select country-{{ country.id }}" multiple></select>

最初的初始化脚本如下，我尝试通过设置selected属性为true来标记预选值，但没有生效：

$(document).ready(function () {

    var country_id_to_bonus_ids = JSON.parse('{{ country_id_to_bonus_ids | tojson | safe }}');

    $('.bonus-multi-select').each(function () {
        var country_id = $(this).attr('class').match(/country-(\d+)/)[1];
        var selected_bonuses = country_id_to_bonus_ids[country_id];

        $(this).select2({
            ajax: {
                url: '/settings/countries/bonuses/data',
                dataType: 'json',
                processResults: function (data) {
                    var results = $.map(data, function (item) {
                        var selected = selected_bonuses.indexOf(item.id) !== -1;
                        return {
                            id: item.id,
                            text: item.id + ' - ' + item.name,
                            selected: selected,
                        };
                    });

                    // 为selected_bonuses数组中的选项设置selected属性为true
                    for (var i = 0; i < results.length; i++) {
                        if (selected_bonuses.indexOf(results[i].id) !== -1) {
                            results[i].selected = true;
                        }
                    }

                    return {
                        results: results
                    };
                }
            },
            placeholder: 'Select bonuses',
            width: '100%',
        });
    });
});

之后我尝试新增接口获取预选值并添加到控件中，但此时预选标签无法显示ID或名称，导致表单重新提交时出错，修改后的脚本代码如下：

$(document).ready(function () {

    var country_id_to_bonus_ids = JSON.parse('{{ country_id_to_bonus_ids | tojson | safe }}');

    $('.bonus-multi-select').each(function () {
        var country_id = $(this).attr('class').match(/country-(\d+)/)[1];
        var selected_bonuses = country_id_to_bonus_ids[country_id];

        console.log(selected_bonuses)

        $(this).select2({
            ajax: {
                url: '/settings/countries/bonuses/data',
                dataType: 'json',
                processResults: function (data) {
                    var results = $.map(data, function (item) {
                        var selected = selected_bonuses.indexOf(item.id) !== -1;
                        return {
                            id: item.id,
                            text: item.id + ' - ' + item.name,
                        };
                    });

                    return {
                        results: results
                    };
                }
            },
            placeholder: 'Select bonuses',
            width: '100%',
        });

        // 获取预选项并添加到控件中
        var $control = $(this);
        $.ajax({
            type: 'GET',
            url: '/settings/countries/bonuses/selected/' + country_id,
            dataType: 'json',
            success: function (data) {
                var $options = $.map(data, function (item) {
                    return new Option(item.name, item.id, true, true);
                });
                $control.append($options).trigger('change');
            },
        });
    });
});

内容的提问来源于stack exchange，提问作者Tom Pain