Question

我正在使用select2来填充HTML选择，我希望select2选项具有与html选择控制选项相同的背景颜色，select2JS中是否有任何选项允许我们这样做或者我必须手动完成？

以下是示例代码

＆＃13;

$('.selectcls').select2({
  minimumResultsForSearch: -1,
  placeholder: "Nothing selected",
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>

<div>
  <select id="select1" class="selectcls" style="width:100px" name="select1this" class="wrap">
        <option></option>
        <option style="background-color:green" value="A21">A21</option>
        <option style="background-color:blue" selected value="A22">A22</option>
        <option style="background-color:orange" value="A23">A23</option>
      </select>

</div>

＆＃13;

或

jsfiddle

Answer 1

您可以在select2.css中指定所需的任何样式对于Eg。我已经重写了从蓝色到黄绿色的高亮颜色

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

Answer 2

您可以这样使用，

.select2-results ul li {
    background-color: red;
}

如果您想在不同的选项中尝试不同的颜色。然后使用CSS3子属性，如li:nth-child(<child number>)。

Answer 3

我在这里https://stackoverflow.com/a/53059749/7582170

详细回答

对于组合框

.select2-container--default .select2-selection--single{
    background-color: #000;
}

用于选项搜索框

.select2-search--dropdown{
    background-color: #000;
}
.select2-search__field{
    background-color: #000;
}

以及选项列表

.select2-results { 
    background-color: #000;
}

Answer 4

对于动态数据，您可以采用以下方法。

let _colors = [
{
    "id": "#1CAC78",
    "text": "Green"
},
{
    "id": "#1F75FE",
    "text": "Blue"
},
{
    "id": "#FF7538",
    "text": "Orange"
}

下拉菜单应该用下面的代码初始化。

$("select").select2({
    templateResult: function (data, container) {
        if (data.element) {
            $(container).css({"background-color":data.id});
        }
        return data.text;
    },data:_colors
});

这是 select2 option with background 的小提琴

选择2选项背景颜色与html选择相同

4 个答案: