选择2，追加不显示标题

Question

所以我在select2自动完成框中遇到了这个问题，当我试图将对象创建到框中时，它创建正常，但对象的名称不会显示在框中并且唯一显示的是＆＃34; X＆＃34;清除对象。

该框的主要焦点是设置数据库中的值以便稍后编辑（添加，删除等）。我想要这样做的方法是先从数据库中获取对象，然后在select2框中创建它。

这是我的javascript文件：

$('#recipefield').select2({
        id: function(data){return data.id;},
        maximumSelectionLength: 5,
        minimumSelectionLength: 3,
        ajax: {
            url: function () {
                return getTypedAutoCompleteUrl();
            },
            dataType: 'json',
            processResults: function (data) {
                  return {
                    results: data
                  };
                }
        },
        templateResult: formatState,
        templateSelection: formatState
    });
});

function getTypedAutoCompleteUrl() {
    return '/api/v1/recipe/' + $('#menutype').val();
}

function formatState (state) {
    if (!state.id) {
        return state.text;
    }
    return state.title;
}

这就是我用来向框中添加对象的内容：

var data = {
    id: 1,
    text: 'text'
};
var newOption = new Option(data.text, data.id, true, true);
$('#recipefield').append(newOption).trigger('change');

所以在将对象添加到框后，框看起来像这样：

以下是我手动选择对象时的样子：

Answer 1

所以，最后我确实做到了，也许对某人有用。

创建了此功能。

function recipeHelper(){
    var recipeList = $("#recipefield").select2("data");
    for(i=0; i<recipeList.length; i++){
        var recipeObject = recipeList[i];
        recipeObject.name = recipeObject.text;
    }
    $("#recipefield").trigger('change');
}

在

中调用“ recipeHelper”功能

$(document).ready(function() {
    ...
    recipeHelper();
});

希望它会对别人有帮助。