如何在 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。