如何将类添加到 select2 选择框？

Question

我想将 pink 类添加到我的 select2 选择框中。它适用于该选项，但不适用于该框：

$("select").select2({
  templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green }
.pink { background-color: pink }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select class="select2 pink">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green" selected>Arizona</option>
</select>


<select class="select2">
  <option value="Something else" >Something else</option>
  <option value="Something else" >Something else</option>
  <option value="Something else">Something else</option>
</select>

我需要的结果：

Answer 1

没用的原因是，我用错了select2版本。

集成很重要：select2.full.js

$(".mybox").select2({
 containerCssClass: "pink",
   templateResult: function (data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }
    return data.text;
  }
});

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green }
.pink { background-color: pink!important }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.full.js"></script>

<select class="select2 mybox">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green" selected>Arizona</option>
</select>

Answer 2

如果您希望所有选项的背景颜色为粉红色，则需要从 select2.css 文件中删除标准颜色。你可以使用

.select2-container--default .select2-selection--single { background:none}

编辑：JQ 代码说明

1. 存储.select2-container的原始类

2. 将粉色类添加到.select2-container

3. 在on change 函数中，“带来”还有之前存储的类（changeMeClass）

4. 在optClass变量中获取选中的选项类

5. 找到与所选选项对应的select2-container

6. 从容器中移除所有类

7. 使用setTimeout函数，将类添加到容器中（原始类+选择的选项类）

如果这就是你要找的东西，请告诉我

见下面的sn-p

$("select").select2({
  templateResult: function(data, container) {
    if (data.element) {
      $(container).addClass($(data.element).attr("class"));
    }

    return data.text;
  }
});
var changeMeClass = $(".pink + .select2-container").attr("class")
$(".pink + .select2-container").addClass("pink")


$(".pink").on("change changeMeClass", function() {
  var optClass = $(this).children("option:selected").attr("class"),
    changeMe = $(this).next(".select2-container")

  $(changeMe).removeClass()

  setTimeout(function() {
    $(changeMe).attr("class", changeMeClass + " " + optClass)
  }, 10);





})

.yellow { background-color: yellow; }
.blue { background-color: blue }
.green { background-color: green }
.pink { background-color: pink }
.select2-container--default .select2-selection--single { background:none!important}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script>

<select class="select2 pink">
  <option value="AL" class="yellow">Alabama</option>
  <option value="AK" class="blue">Alaska</option>
  <option value="AZ" class="green" selected>Arizona</option>
</select>


<select class="select2">
  <option value="Something else" >Something else</option>
  <option value="Something else" >Something else</option>
  <option value="Something else">Something else</option>
</select>