Select2在动态列表中插入一个空文本选项

Question

我正在使用带有Jquery-editable的Select2并遇到Select2的异常行为，我正在做的是使用ejs模板显示可编辑的信息表，并且当用户点击CBA时打开一个select2框，其中包含最初选择的结果，然后用户可以在其中添加或删除选项，选项来自数据库源，当用户选择一个选项时，它会在数据库中添加一个带有所选选项的空选项，该数组看起来像这样

  

[“ABCD”，“ONAB”，“”，“BCNU”]

我在某处读到了关于allowClear：true并添加了一个placeHolder但它根本没有帮助我。由于一切都是动态完成的，我无法找到添加空选项的位置。

代码如下：

选择2的Ejs / HTML代码

<tr>
<td width="40%">Select CBA(s)</td>
<td>
    <a class="cbaSelectUnit" data-emptytext="Select CBA(s)" data-original-title="Select CBA(s)" data-type="select2"></a>
</td>

选择2的Javascript

    $("a[data-name='Cba']").editable({
    showbuttons: 'false',
    emptytext: 'None',
    display: function(values) {
        var html = [];
        html.push(values);
        $(this).html(html);
    },
    select2: {
        multiple: true,
        allowClear: true,
        placeholder: "Select CBA(s)",
        ajax: {
            // url is copied from data-source via x-editable option-passing mechanism
            dataType: 'json',
            // pass the '?format=select2' parameter to API call for the select2-specific format
            data: function(term, page) {
                return {
                    deptId: departmentId,
                    format: 'select2'
                };
            },
            // transform returned results into the format used by select2
            results: function(data, page) {
                return {
                    results: data
                };
            }
        },
        // what is shown in the list
        formatResult: function(cba) {
            return cba.text;
        },
        // what will appear in the selected tag box
        formatSelection: function(cba) {
            return cba.text;
        },
        // rendering id of the values to data.value requirement for Select 2
        id: function(cba) {
            return cba.value;
        },
        // what is shown in the selected-tags box
        initSelection: function(element, callback) {
            var id = $(element).val(),
                result = id.replace(/^,\s*$/, ',').split(",").map(function(v) {
                    return {
                        id: v,
                        text: v
                    };
                });
            callback(result);
        }
    }
});

从数据库返回代码的格式： -

    Facility.findOne({ _id: department.Facility }, function(err, facility) {
    if (err) {
        res.send(500, err);
    } else if (!facility) {
        res.send(404, 'Facility not found');

    } else if (req.query.format && req.query.format === 'select2') {
        var result = facility.Cba.map(function(c) {
            return { value: c, text: c };
        });
        res.json(result);

    }
});

图片显示自己添加的空框

编辑后数组的显示方式

Answer 1

所以这只是一个简单的语法错误，我自己发现了，

我将cba.value作为id返回，但initSelection正在返回

  

{id：v，text：v}

它应该是价值＆amp;文字而不是id＆amp;文本。

       // what is shown in the selected-tags box
    initSelection: function(element, callback) {
        var id = $(element).val(),
            result = id.replace(/^,\s*$/, ',').split(",").map(function(v) {
                return {
                    value: v,
                    text: v
                };
            });
        callback(result);
    }