如何为 select2 中的每个选项设置不同的颜色？

Question

就像标题中的问题一样，但我需要更改每个选项的选择框的背景颜色，不要更改下拉选择列表中的任何内容。

“未签到”：背景颜色变为蓝色，“取消”：背景颜色变为粉红色。

这是我的代码：

$(document).ready(function () {
    $('.select2').select2({})
});

.wrap-ds-chitiet + .select2-container {
    width: 100% !important;
}
.select2-search--dropdown {
    display: none !important;
}
.wrap-ds-chitiet + .select2-container .select2-selection {
    height: 55px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border: none;
    font-family: 'Montserrat';
    font-weight: 600;
    font-size: 0.93rem;
    background: linear-gradient(to right, #f8ca6b, #fbad7d);
    color: #fff;
}
.wrap-ds-chitiet + .select2-container .select2-selection--single .select2-selection__rendered {
    color: #fff;
    padding-left: 20px;
    padding-top: 13px;
}
.wrap-ds-chitiet + .select2-container--default .select2-selection--single .select2-selection__arrow {
    margin-right: 21px;
    margin-top: 11px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div>
  <select class="form-control select2 wrap-ds-chitiet" id="ds-chitiet-option">
          <option>Check-in</option>
          <option>Not check-in</option>
          <option>Cancel</option>
  </select>
</div>  

Answer 1

你可以使用select2:select事件来实现这个，

我已经为选项添加了值，并创建了 CheckValues 常用函数来添加类和 css 类。

请查看演示。

$(document).ready(function() {
  $('.select2').select2()
  $('.select2').on('select2:select', function(e) {
    var data = e.params.data;
    $(".select2-selection").removeClass("defaultColor blueColor blueColor");
    CheckValues(data.element.value)
    console.log(data);
  });

  function CheckValues(value) {
    switch (value) {
      case "checkin":
        $(".select2-selection").addClass("defaultColor");
        break;
      case "notcheckin":
        $(".select2-selection").addClass("blueColor");
        break;
      case "cancel":
        $(".select2-selection").addClass("pinkColor");
        break;
    }
  }
  
  CheckValues($(".select2").val())

});

//With "not check-in": background color change to blue, and with "cancel": background color change to pink.

.wrap-ds-chitiet+.select2-container {
  width: 100% !important;
}

.select2-search--dropdown {
  display: none !important;
}

.wrap-ds-chitiet+.select2-container .select2-selection {
  height: 55px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: none;
  font-family: 'Montserrat';
  font-weight: 600;
  font-size: 0.93rem;
  color: #fff;
}

.wrap-ds-chitiet+.select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff;
  padding-left: 20px;
  padding-top: 13px;
}

.wrap-ds-chitiet+.select2-container--default .select2-selection--single .select2-selection__arrow {
  margin-right: 21px;
  margin-top: 11px;
}

.default {
  background: linear-gradient(to right, #f8ca6b, #fbad7d);
}

.defaultColor {
  background: linear-gradient(to right, #f8ca6b, #fbad7d);
}

.select2-selection--single{
background-color:transparent;
}

.blueColor {
  background: linear-gradient(to right, blue, blue);
}

.pinkColor {
  background: linear-gradient(to right, #FFC0CB, #FFC0CB);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<div>
  <select class="form-control select2 wrap-ds-chitiet" id="ds-chitiet-option">
    <option value="checkin">Check-in</option>
    <option value="notcheckin">Not check-in</option>
    <option value="cancel">Cancel</option>
  </select>
</div>