更改 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) {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; // Transform data, use text as id&nbsp; &nbsp; &nbsp; &nbsp; results: $.map(data, function (obj) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; obj.id = obj.text;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return obj;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; };}这是一个有效的 JSFiddle。请注意，我已将其设置为使用 JSFiddle 的/echo/jsonasync 选项模拟您的真实 AJAX 请求。这是生成的源代码的屏幕截图，显示了value添加的标签和通过 AJAX 检索到的标签的名称 ( text)：

Answer 2

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