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

Question

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

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

Sections 是一个带有 id 和 text 键的对象，供 select2 使用。

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

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

我想我需要使用initSelection函数，但我不确定如何制定它，以便我可以返回与section对象中的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

我认为initSelection 中的docs 在这方面不太清楚。关键是要注意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
    });
}

希望这会有所帮助。