更改选择2选择的背景色选择栏

我在我的应用程序中使用选择二设置多重选择标签类型字段中。我知道CSS属性改变选择框的颜色，一旦它被放置在选择栏：更改选择2选择的背景色选择栏

选择框颜色

.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设计标签盒？

来源

2017-08-29 Marty Lavender

我建议重写的样式，而不是通过javascript设置它们的。该插件是开源的，所以样式表都可以在GitHub上的SCSS文件：https://github.com/select2/select2/tree/master/src/scss。如果您使用的引导，从这个仓库https://github.com/select2/select2-bootstrap-theme/tree/master/src – r3bel

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

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

并与其余相同。

来源

2017-08-29 19:04:05 juanlumn

使用文件似乎没有工作。我更新了我的原始JS –

更改选择2选择的背景色选择栏

回答

相关问题