如何在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.css文件中删除标准颜色。你可以使用

来做到这一点

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

编辑：JQ代码说明

1. 存储.select2-container

的原始类

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

{li>

在on change函数中，'带''以前存储的类（changeMeClass）

3. 在optClass变量

中获取所选的选项类

4. 找到与所选选项

对应的select2-container

5. 从容器中删除所有类

6. 使用setTimeout函数，向容器添加类（原始类+所选选项类）

如果您正在寻找

，请告诉我

请参阅下面的代码段

$("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>

Answer 2

它不起作用的原因是，我使用了错误的select2版本。

  

整合非常重要：select2.full.js

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

{{1}}