这是我的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来打印这个选择列表。
$('.select2')select2();
问题出在style属性上 -- 当我在每个选项中设置这个属性时,jQuery脚本并没有把这个属性复制给我。<li>
列表。
我知道,我可以设置每个 background-color
变成 <style></style>
标签,但我有更多的选项(约150个),而且我在我的网站上将这个属性(背景色)管理为活的(当用户更改一些选项时,我就会更改背景色),所以我需要一个解决方案,它将从原始选项列表中活的复制样式属性,当我重置选择列表时(使用 $('.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>
在第一点,只是作为一个选项,你可以定义类,并像下面的jquery例子一样使用它,并替换了 .data('style')
与 .data('class')
和 style="
与 class="
. 然后你可以写下这个HTML
<!-- ... -->
<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/[email protected]/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/[email protected]/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>