使用函数中的数据源（动态数据源）- Select2 v4

Question

在以前的版本中，可以通过以下方式轻松完成此操作：

someDynamicData=function(){
     //return some data...
}

$("#lga").select2({
    width: '100%',
    allowClear: false, placeholder: "--- please select ---",
    data: function () {
        return {results: someDynamicData, text: 'name'};
    }
});

我这不适用于新的 select2 v4。我如何在新的 select2 v4.

中实现这一点

Answer 1

对于可能像我一样储备了 select2 v4 的任何人。我有一个解决方法。请注意，我是 javascript 大师，可能有一些更好的方法来解决这个问题。暂时这是摇摆不定的：

案例研究： 我有一个链式 select 选项，它从列表中共享 JSON 对象：这里我只显示 Subject 和 Level 示例只是为了简单起见。当一个主题被 selected 时，我如何从 selected 主题的数据源

初始化 Level 数据源

function getDynamicData(){
    return [
       {"code": "ACC", "name": "ACCOUNTING", "levels": [
            {"id": 3, "name": "SS 1", "description": "Senior Secondary School 1", "type": "Standard", "resultTemplates": []},
        ....
        ]}
        ....
    ];
}    

$.fn.select2.amd.require(['select2/data/array', 'select2/utils'],
    function (ArrayData, Utils) {
        function CustomData($element, options) {
            CustomData.__super__.constructor.call(this, $element, options);
        }

        Utils.Extend(CustomData, ArrayData);

        CustomData.prototype.query = function (params, callback) {
            subjects = getDynamicData();
            $.map(subjects, function (d) {//Required only when the object do not have either id/text
                d.id = d.code;
                d.text = d.name;
                return d;
            });
            callback({results: subjects});
        };

        $("#subjects").select2({
            width: '100%',
            dataAdapter: CustomData
        });
    }
);

This works fine but then I realized that I am repeating many things hence it is time for cleanup

//Added this function to a javascript file on my template (shared across pages)
function initMySelect2(myQuery, mySelector, props) {
    $.fn.select2.amd.require(['select2/data/array', 'select2/utils'],
        function (ArrayData, Utils) {
            function CustomData($element, options) {
                CustomData.__super__.constructor.call(this, $element, options);
            }

            Utils.Extend(CustomData, ArrayData);
            CustomData.prototype.query = myQuery;//Pass the query function as a parameter
            $(mySelector).select2(props(CustomData));//Initialise the select2 with the custom data
        }
    );
}

//Used this to initialize select2
initMySelect2(function (params, callback) {
        callback({results: getDynamicData()});
    },
    "#subjects",
    function (myCustomData) {
        return {
            width: '100%',
            placeholder: '---please select subjects ---',
            dataAdapter: myCustomData
        };
    }
);

参考https://select2.github.io/announcements-4.0.html 我希望这会帮助那里的人。

使用函数中的数据源（动态数据源）- Select2 v4

Use data source from a function (dynamic datasource) - Select2 v4

javascript

jquery-select2