更改单个 select2 框的选项背景颜色？

Question

我使用了 select2 插件。我需要添加新类 .select2-results .select2-highlighted 类用于覆盖背景颜色。 谁能告诉我解决办法。

Answer 1

您想为不同的 select2 框着色不同的颜色。 select2 实际上使这有点困难，因为生成的 html 的格式以及它添加到文档的方式：

From the Docs:

默认情况下，Select2 会将下拉菜单附加到正文的末尾，并将其绝对定位在选择容器下方。

当下拉列表附加到正文时，您不仅限于在容器下方显示下拉列表。如果容器下方没有足够的空间，Select2 将显示在容器上方，但上方有足够的空间。您也不限于在父容器中显示下拉菜单，这意味着 Select2 将在模态框和其他小容器中正确呈现。

这显然有助于 select2 在 modals 等中更好地工作，但它会让你感到厌烦，因为“父”元素现在并不意味着 jack，....即 - 为原始 select 的父元素的后代设置样式不会帮助你。

不过，dropdownParent 选项可让您指定应将生成的 html 添加到何处...因此我们可以改为使用它。

基本思想是为每个选择添加一个data-select2-container="" 属性，它的select2 对应项应该有不同的颜色。然后，代码将使用属性中指定的类创建一个 div，并将其添加到原始选择之后，然后将 select2 框附加为该添加的 div 的子项，从而允许您将元素设置为具有指定类的 div 的子项：

$(function () {
     $(".select2").each(function(i,e){
         $this = $(e);
         if($this.data('select2-container')){
         	 // if a container was specified as a data attribute, create that container and add it after the current raw select element
        	 // the value set for `data-select2-container` will be used as the class for the container
             $('<div class="'+$this.data('select2-container')+'"></div').insertAfter($this);
             $this.select2({
      		     placeholder: 'Select an option...',
     		     dropdownParent:$this.next() // set the parent for the generated html to the element we created
    		 });
         } 
         else $this.select2({ placeholder: 'Select an option...'}); // handel cases where a container was not specified 
     });
});

.orange .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: orange;
}

.red .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: red;
}

.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container1">
    <select class="select2" data-select2-container="orange">
        <option></option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select><br>
    <div class="container2">
        <select class="select2" data-select2-container="green">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select><br>
        <select class="select2" data-select2-container="red">
            <option></option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
        
</div>
<br>

重要提示：

1. 此代码仅在您使用full version of select2 4.0.0 (and the CSS to go with it) 时有效
2. 像这样添加的元素如果在模式中可能无法按预期运行（根据文档中的 cmets 判断，未经测试）
3. 这是其中一种情况，我可能会下载插件并对其进行编辑，使其本身具有此功能，我无法想象为什么作者没有为此提供选项...