jQuery Select 2-从原始选项的select中获取style属性

92vpleto  于 2023-04-11  发布在  jQuery
关注(0)|答案(1)|浏览(175)

下面是我的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>

最后,我使用select 2打印这个选择列表:

$('.select2')select2();

问题在于style属性--当我在每个选项中设置这个属性时,jQuery脚本不会为<li>列表复制这个属性。
我知道,我可以将每个background-color设置为<style></style>标记,但我有更多选项(~150),我管理这个属性(背景色)在我的网站作为活(当用户改变一些选项,然后我改变背景颜色),所以我需要的解决方案,这将是活拷贝风格属性从原来的选项列表,当我重置选择列表(使用$('.select2').select2()),bg颜色也将被重置。
我该怎么做?

@更新

我是这样解决问题的:

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>
xoefb8l8

xoefb8l81#

在第一点上,作为一种选择,您可以定义类并像下面的jquery示例一样使用它,将.data('style')替换为.data('class'),将style="替换为class="

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

解决方案

否则,你可以用templateResult选项模板化下拉列表-你可以在这里找到文档。基于你分享的例子,我会像这样解决它:

$(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>

相关问题