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