更改 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（文本），如下所示：现在我需要将选项value（获取数据库数据）从数据id更改为数据name（文本）。如何将选项数据值从 id 更改为 name？！

Answer 1

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

Select2 数据格式在文档中进行了描述：

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

文档还描述了如何使用您以外的其他东西id：

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

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

您可以使用 AJAX 选项来做到这processResults()一点。使用$.map文档来做到这一点：

processResults: function (data) {

    return {

        // Transform data, use text as id

        results: $.map(data, function (obj) {

            obj.id = obj.text;

            return obj;

        })

    };

}

这是一个有效的 JSFiddle。请注意，我已将其设置为使用 JSFiddle 的/echo/jsonasync 选项模拟您的真实 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

}