如何在select2标签上获取随机背景颜色？

Question

我想在 select2 上有多个不同颜色的标签。

可以用

来完成

$('#select2Skills').select2({
        tags: true,
        multiple: true,
        allowClear: true,
        placeholder: 'Add a skill, a keyword, a sentence.',
        templateSelection: function(d, container) {
                $(container).css({ "background-color": randomHSL() });            
                return d.text;  
        }
});

但是每次我输入新标签时，现有标签的所有颜色都会更改。 我该如何防止这种情况？通过添加属性“彩色”？

欢迎任何帮助。

Answer 1

为了防止在 Select2 中添加不同颜色的新标签时现有标签的颜色发生变化，您可以存储现有标签的颜色，然后在每次添加新标签时一致地分配它们。您可以使用数据属性来存储每个选项的颜色，然后在需要时检索它。

以下是如何修改代码来实现此目的：

// 用标签和多个选项初始化 Select2

$('#select2Skills').select2({
    tags: true,
    multiple: true,
    allowClear: true,
    placeholder: 'Add a skill, a keyword, a sentence.',
    templateSelection: function (d, container) {
        var color = $(d.element).data('color'); // Retrieve the color from data attribute

        if (!color) {
            color = randomHSL(); // Generate a random color if it doesn't exist
            $(d.element).data('color', color); // Store the color in data attribute
        }

        $(container).css({ "background-color": color });
        return d.text;
    }});

在此代码中：

1. 添加新标签时，它会检查该标签的数据属性 data-color 是否存在。如果是，它将从中检索颜色。如果没有，它会使用 randomHSL() 函数生成随机颜色（您可能有自己的颜色生成函数）。

2. 颜色随后存储在选项元素的 data-color 属性中，以便在渲染标签时可以一致地检索和使用它。

这样，现有标签将保留其颜色，并且新标签将根据需要分配颜色，而不会影响现有标签。