我想用缩进创建多级select2选项,但我不想为此使用optgroup元素,因为我想允许选择主要类别.如果是select2,有什么方法可以设置样式吗？
我的原始HTML选择如下所示：
<select class="js-select-multiple">
<option class="l1">Option 1</option>
<option class="l2">Suboption 1</option>
<option class="l2">Suboption 2</option>
<option class="l2">Suboption 3</option>
<option class="l1">Option 2</option>
...
</select>
<script>$(".js-select-multiple").select2({maximumSelectionLength: 5});</script>
所以不使用Select2我可以将文本缩进属性添加到.l2类.但是,似乎Select2不使用那些用于选项的类,因此设置这些类的样式将不起作用.
那有什么解决方法吗？
解决方法
你认识到Select2没有携带< option>中的CSS类是正确的.标签到结果列表.这主要与未将结果列表明确地绑定到现有的< option>有关.标签,还有一组合理的默认值.之后添加转移类的能力比删除它更容易.
您可以通过覆盖templateResult并从data.element获取原始选项(其中data是第一个参数)来完成此操作.
$('.select2').select2({
templateResult: function (data) {
// We only really care if there is an element to pull classes from
if (!data.element) {
return data.text;
}
var $element = $(data.element);
var $wrapper = $('<span></span>');
$wrapper.addClass($element[0].className);
$wrapper.text(data.text);
return $wrapper;
}
});
.l2 {
padding-left: 1em;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script> <select class="select2" style="width: 200px"> <option class="l1">Option 1</option> <option class="l2">Suboption 1</option> <option class="l2">Suboption 2</option> <option class="l2">Suboption 3</option> <option class="l1">Option 2</option> </select>
请注意,我也使用padding-left而不是text-indent,这是Select2通常用于嵌套选项的内容.
