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

前端之家收集整理的这篇文章主要介绍了jquery – 如何在select2下拉框中添加HTML内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经使用 Select2 plugin标签输入. Here is the fiddle of my basic work.我需要在下拉框中显示每个选项/标签的“used number”,如下所示:

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

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

});

解决方法

标签数组必须包含具有键id和文本的对象.如果需要,您可以添加更多的键(对于您的情况,我添加了代表该数字的键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.

猜你在找的jQuery相关文章