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

Posted 2023-05-07

【中文标题】如何在 select2 下拉框中添加 HTML 内容

【英文标题】：How to add HTML content at select2 dropdown box

【发布时间】：2014-10-05 16:19:15

【问题描述】：

我使用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']
);

);

【参考方案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。

【讨论】：

此功能有效。但是，问题出在我的手上，你会发现你可以输入自己的标签。但是，在您的小提琴中，无法制作徒手标签

如果我使用标签而不是数据，这将得到解决。但是，当时，建议框的文本显示“未定义”代替随机文本的数字。我想要，对于随机文本，不会显示任何内容来代替数字。 jsfiddle.net/learner73/fc56928s/2

对不起，我没有从你的问题中理解这一点。为了满足您的需求，我已经编辑了我的答案和小提琴。

请注意，在版本 4 中，方法名称 formatResult 已重命名为 templateResult。 select2.github.io/announcements-4.0.html