更改 select2 ajax 标记中的选项数据值

Question

我有这个使用 ajax 的 select2 标签方法的代码：

json 数据：

[
    {
        "id": "5",
        "text": "laravel3"
    },
    {
        "id": "4",
        "text": "laravel2"
    }
]

代码：

$(document).ready(function(){
    $('#tag_list').select2({
        placeholder: "Choose tags...",
        tags: true,
        minimumInputLength: 3,
        tokenSeparators: [",", " "],
        createSearchChoice: function(term, data) {
            if ($(data).filter(function() {
                return this.text.localeCompare(term) === 0;
            }).length === 0) {
                return {
                    id: term,
                    text: term
                };
            }
        },
        ajax: {
            url: '/tags/find',
            dataType: 'json',
            data: function (params) {
                return {
                    q: $.trim(params.term)
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            delay: 250,
            cache: true
        }
    });
});

使用我的代码，我可以从数据库中搜索和选择数据，或者将新标签添加到我的 select2 区域。现在，当我从数据库中选择数据时，<option value=""> 是数据 id 但是当我添加新标签时 <option value=""> 是 name(text)，如下所示：

现在我需要将选项 value（获取数据库数据）从数据 id 更改为数据 name（文本）。如何将选项数据值从 id 更改为 name？！

Answer 1

更新：我添加了更多背景和对文档的引用，并将 JSFiddle 切换为使用 $.map()，就像文档一样。

The Select2 data format 在文档中有描述：

Select2 需要一种非常具体的数据格式 [...] Select2 要求每个对象都包含一个 id 和一个 text 属性。 [...] Select2 从数据对象的id 属性生成value 属性...

文档还描述了how to use something other than your id：

如果您使用id 以外的属性（如pk）来唯一标识选项，则需要先将旧属性映射到id，然后再将其传递给Select2。如果您无法在服务器上执行此操作，或者您处于无法更改 API 的情况，您可以在将其传递给 Select2 之前在 JavaScript 中执行此操作

在您的情况下，这意味着转换您从 AJAX 调用返回的 data，以便每个结果的 id 元素实际上是 text 值。

您可以使用the processResults() AJAX option 做到这一点。要做到这一点，请使用 $.map 作为文档：

processResults: function (data) {
    return {
        // Transform data, use text as id
        results: $.map(data, function (obj) {
            obj.id = obj.text;
            return obj;
        })
    };
}

这是working JSFiddle。请注意，我已将其设置为使用 JSFiddle 的 /echo/json async 选项模拟您的真实 AJAX 请求。

这是生成源代码的屏幕截图，显示了两个添加标签的value，以及通过 AJAX 检索到的标签的名称 (text)：

Answer 2

试试这个：

ajax: {
    url: '/tags/find',
    dataType: 'json',
    data: function (params) {
        return {
            q: $.trim(params.term)
        };
    },
    //updated 
    processResults: function (data) {
        var newData = [];
        $.each(data, function (index, item) {
            newData.push({                        
                    id: item.id, //id part present in data                        
                    text: item.text //string to be displayed
            });
        });
        return { results: newData };
    },
    //
    delay: 250,
    cache: true
}