在选择区域内更改select2选择的背景颜色 [英] Changing the background color of a select2 selection within the select field

问题描述

我正在使用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设计标签盒？

解决方案

更改 $（this）.parent（） .css（'background-color'，'green'）;

由 $（this）.parent（ ）.css（{'background-color'：green}）;

和其余部分一样。

I am using Select2 to setup multi-select tag type fields in my application. I know which CSS attribute changes the colors of the selection box once it is placed in the select field:

selection box color

.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
}

What I am trying to figure out is how to have this change based on the selection a user makes. The selection list is pre-defined.

Tried something like this:

JavaScript to initialize / change box color

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

This does not appear to work. Has anyone tried styling the tag boxes for Select2?

解决方案

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

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

And the same with the rest.

这篇关于在选择区域内更改select2选择的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！