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

Change option background color for individual select2 boxes?

本文关键字：选项 背景 颜色 单个 select2      更新时间：2023-09-26

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

你想给不同的select2框涂上不同的颜色。由于生成的HTML格式和添加到文档中的方式，Select2实际上使这有点困难:

From the Docs:

默认情况下，Select2会将下拉列表附加到body的末尾，并将其绝对放置在选择容器的下方。

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

这显然有助于select2在情态态中更好地工作，但它会让你感到困惑，因为"父"元素现在并不意味着jack，....

然而，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. 这段代码只会在你使用完整版本的select2 4.0.0(和与之配套的CSS)
    2. 时才会起作用
  2. 像这样添加的元素可能不会像预期的那样工作，如果他们是在一个模态中(从文档中的注释判断，未测试)
  3. 这是其中一种情况，我可能会下载插件并编辑它，以便它具有本机功能，我无法想象为什么作者没有包含这个选项…
相关文章：