我使用过select2插件。我需要添加新类 .select2-results .select2-highlighted类用于覆盖背景颜色。 任何人都可以告诉我解决方案。
答案 0 :(得分：1)
您想为不同的select2框颜色设置不同的颜色。 select2实际上使这有点困难，因为生成的html格式及其添加到文档的方式：
默认情况下，Select2会将下拉列表附加到正文的末尾，并将其绝对定位到选择容器下方。
当下拉列表附加到正文时，您不仅可以显示容器下方的下拉列表。如果容器下方没有足够的空间，则Select2将显示在容器上方，但其上方有足够的空间。您也不仅限于在父容器中显示下拉列表，这意味着Select2将在模态和其他小容器内正确呈现。
这显然有助于select2在模态等方面更好地工作但是因为＆＃34;父母＆＃34;元素并不意味着杰克，....即 - 原始选择父母的造型后代不会帮助你。
但是，dropdownParent选项允许您指定应添加生成的html的位置...因此我们可以使用它。
基本思想是为每个选择添加data-select2-container=""属性，其select2对应的颜色应不同。然后代码将创建一个div，其中包含属性中指定的类，并在原始select之后添加它，然后将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>