更改選擇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選擇的背景色選擇欄

回答

相關問題