如何在 Select2 中保留源选择的属性（如 CSS 类）？

Question

我想让 Select2 在其选择和结果下拉呈现中包含原始源的所有 CSS 类。

This solution 使用templateResult 选项并适用于结果下拉菜单。当我按照next answer 中的建议为templateSelection 使用相同的代码时，它似乎可以工作，但是有一个问题：

function copyClassesToSelect2(data, container) {
    if (data.element) {
        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}

(function ($) {
    "use strict";
    $(function () {
        $("#my-select").select2({
            allowClear: true,
            minimumResultsForSearch: Infinity,
            templateResult: copyClassesToSelect2,
            templateSelection: copyClassesToSelect2
        });
    });
}(jQuery));

.one {background: cyan}
.two {background: yellow}
.three {background: lightgreen}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<select id="my-select" class="my-select" name="my-select" data-placeholder="--- Please select ---">
    <option value="">--- Please select ---</option>
    <option value="one" class="one">One</option>
    <option value="two" class="two">Two</option>
    <option value="three" class="three">Three</option>
</select>

更改选择时，呈现的选定项会保留所有先前附加的类。因此，当强>“三”中选择“一个”或“两个”时，它们都保持绿色而不是它们各自的颜色。此外，在清除选择时，占位符的背景为绿色。

1. 我需要如何修改templateSelection 回调以使所选项目仅具有所需的类？

2. 几乎没有记录的选项adaptContainerCssClass 和adaptDropdownCssClass 在这里有什么帮助吗？他们是做什么的？

3. 是否有更好的方法让 Select2 继承所有原始源属性，例如 class="my-select" 来自原始 <select>？

Answer 1

这是一个解决方法：

function copyClassesToSelect2(data, container) {
    if (data.element) {
        $.each($(container).attr('class').split(' '), function(index, cssClass) {
            if(!cssClass.match("^select2-")) {
                $(container).removeClass(cssClass);
            }
        });

        $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
}