在选择字段中更改 select2 选择的背景颜色

Question

我正在使用 Select2 在我的应用程序中设置多选标签类型字段。我知道哪个 CSS 属性会在将选择框放在选择字段中后更改其颜色：

选择框颜色

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

我想弄清楚的是如何根据用户所做的选择进行此更改。选择列表是预定义的。

试过这样的：

JavaScript 初始化/更改框颜色

$(document).ready(function () {
        $('#test').select2();
        $('.select2-container--default .select2-selection--multiple .select2-selection__choice').each(function () {
            var title = $(this).attr('title');
            console.log(title);
            if (title === 'Breakfast') {
                $(this).parent().css({ 'background-color': "green" });
            }
            if (title === 'Brunch') {
                $(this).parent().css({ 'background-color': "red" });
            }
            if (title === 'Lunch') {
                $(this).parent().css({ 'background-color': "blue" });
            }
        });
    });

这似乎不起作用。有没有人尝试过为 Select2 设置标签框的样式？

Answer 1

更改$(this).parent().css('background-color', 'green');

$(this).parent().css({ 'background-color': "green" });

其余的也一样。