javascript - 使用 javascript 对象作为数据源在 Select2 中设置值

Question

我有一个 select2 通过以下方式初始化:

$('#bookingResource').select2({
    placeholder: "Select Resource",
    minimumInputLength: 0,
    multiple: true,
    allowClear: true,
    data: function() {
        return {results: sections };
    }
});

Sections 是一个对象，其中包含 select2 使用的 id 和 text 键。

我需要仅使用另一个对象的 ID 来预先选择一个值。

$('#bookingResource').select2("val", object.resourceID);

我认为我需要使用 initSelection 函数，但我不确定如何制定它，以便我可以返回与节对象中的 ID 相对应的文本...

当我尝试使用 Select2 中显示的以下 initSelection 示例并调用 .select2("val"... 时，我根本没有得到任何输出。

initSelection : function (element, callback) {
        var data = [];
        $(element.val().split(",")).each(function () {
            data.push({id: this, text: this});
        });
        callback(data);
    }

Answer 1

我认为docs initSelection 的这一点相当不清楚。关键是要注意 initSelection

is supposed to process a value.

和

The function will only be called when there is initial input to be processed.

经过一些testing ，我注意到 initSelection 在以下情况下被调用:

1. .select2('val', $preselect_non_empty_value) 被调用，或者
2. 相应的 HTML 元素已指定非空 value 属性。

根据您检索sections数据的方式，我的fiddle可能会也可能不会回答你的问题。第一个 select2 调用 .select2('val', 4) 将 4 设置为对象的预选 ID。第二个 select2 仅使用 element.val() 从 HTML 属性中提取值。

此外，到目前为止我所看到的关于 initSelection 的大多数示例似乎都期望 HTML 元素包含一些初始值。否则，他们会执行一些 AJAX 操作。例如，

var id=$(element).val();
if (id!=="") {
    $.ajax($some_url, {
        //...
    }).done(function(data) { 
        callback(data); // data must be a single object
    });
}

希望这有帮助。