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

我已经使用Select2插件进行标签输入。 这是我基本工作的小提琴 。 我需要在下拉框中显示每个选项/标签的“使用过的数字”，如下所示：

我在我的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 + "" + result.qt + ""; } }); 

看到分叉的小提琴 。