jquery - 如何在select2下拉框中添加HTML内容

Question

我用过Select2 plugin用于标签输入。 Here is the fiddle of my basic work 。我需要在下拉框中显示每个选项/标签的“已使用数量”，如下所示:

我已在 CSS 中为该数字创建了一个类 (.used-number)。但是，我不明白如何在 HTML 文件中为每个选项添加该数字。有没有办法添加这样的东西(或任何其他方式):

$(".tag").select2({
     data:[{tag: 'red',text:'3',className: 'used-number'},{tag: 'green',text:'12',className: 'used-number'},{tag: 'blue',text:'5', className: 'used-number'},{tag: 'black',text:'7'}]
});

});

Answer 1

tags 数组必须包含带有键 id 和 text 的对象。如果需要，您可以添加更多键(对于您的情况，我添加了代表数字的键 qt)。

要将 HTML 添加到选项，您需要更改默认的 formatResult 函数。使用以下代码，数字将显示给存在的标签(即传递给 select2 的标签)。对于即时创建的选项，该数字不会出现。

$(".tag").select2({
    tags:[
        {id: "red", text: "red", qt: 3},
        {id: "green", text: "green", qt: 12},
        {id: "blue", text: "blue", qt: 5},
        {id: "black", text: "black", qt: 7}
    ],
    formatResult: function(result) {
        if (result.qt === undefined) {
            return result.text;
        }

        return result.text
            + "<span class='used-number'>"
            + result.qt
            + "</span>";
    }
});

请参阅forked fiddle .