jQuery Select2 - 从原始选项中获取样式属性 select

Question

这是我的 HTML 代码：

<select class="select2">
    <option value="1" style="background-color: #ff0000;">OPTION 1</option>
    <option value="2" style="background-color: #ffffff;">OPTION 2</option>
    ....
    <option value="144" style="background-color: #000000;">OPTION 144</option>
</select>

最后，我使用 select2 打印此 select 列表：

$('.select2')select2();

问题出在样式属性上 - 当我将此属性设置到每个选项时，jQuery 脚本不会为 <li> 列表复制此属性。

我知道，我可以将每个 background-color 设置为 <style></style> 标签，但我有更多选项 (~150)，并且我在我的网站上将此属性（背景颜色）管理为实时（当用户更改某些选项时，然后我更改背景颜色），所以我需要解决方案，它将是原始选项列表中的实时复制样式属性，当我重置 select 列表（使用 $('.select2').select2()）时，bg颜色也将被重置。

我该怎么做？

@UPDATE

我是这样解决问题的：

function formatState(data, container)
    {
        if (data.element)
        {
            $(container).css('background-color', '#'+$(data.element).attr('data-style'));
        }
        return data.text;
    }

$('.select2').select2({templateResult: formatState});

我替换选项HTML代码：

<option value="1" style="background-color: #ff0000;">OPTION 1</option>

为此：

<option value="1" data-style="ff0000">OPTION 1</option>

Answer 1

首先，作为一个选项，您可以定义类并像下面的 jquery 示例一样使用它，将 .data('style') 替换为 .data('class') 和style=" 与 class="。然后你可以这样写 HTML

<!-- ... -->
<option value="1" data-class="option-white">OPTION 1</option>
<!-- ... -->

解决方案

否则，您可以使用 templateResult 选项对下拉列表进行模板化 - 您 find the docs here。根据你分享的例子，我会这样解决：

$(document).ready(function() {

  function formatState(state) {
    if (!state.id) {
      return state.text;
    }

    return $(
      '<div style="' + $(state.element).data('style') + '"> ' + state.text + '</div>'
    );
  };

  $('.select2').select2({
    templateResult: formatState
  });
  
});

.select2-results__option { padding: 0 !important; }
.select2-results__option div { padding: 6px; }

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select class="select2">
    <option value="1" data-style="background-color: #ff0000;">OPTION 1</option>
    <option value="2" data-style="background-color: #ffffff;">OPTION 2</option>
    <!-- .... -->
    <option value="144" data-style="background-color: #000000;">OPTION 144</option>
</select>

jQuery Select2 - 从原始选项中获取样式属性 select

jQuery Select2 - get style attribute from original option's select

jquery

jquery-select2