Question

我想创建带缩进的多级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，我可以将text-indent属性添加到.l2类。但是，似乎Select2不使用那些用于选项的类，因此设置这些类的样式将不起作用。

有没有解决办法？

Answer 1

你认识到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通常用于嵌套选项的内容。

Select2中的可选optgroups

1 个答案: