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" });

与其他人一样。

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

1 个答案: