javascript - select2，追加不显示标题

Question

所以我在 select2 自动完成框上遇到了这个问题，当我尝试在框中创建对象时，它创建得很好，但对象的名称没有显示在框中，唯一显示的是是“X”清除对象。

该框的主要焦点是设置数据库中的值以便稍后编辑(添加、删除等)。我想要的方法是首先从数据库获取对象，然后在 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();
});

希望它能对某人有所帮助。