Select2 中的可选 optgroup

Posted 2023-05-07

【中文标题】Select2 中的可选 optgroup

【英文标题】：Selectable optgroups in Select2

【发布时间】：2015-08-29 11:25:04

【问题描述】：

我想创建带有缩进的多级 select2 选项，但我不想为此使用 optgroup 元素，因为我还想允许选择主要类别。如果选择2，有什么方法可以设置样式吗？

我的原始 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 似乎没有使用那些用于选项的类，因此对这些类进行样式设置将不起作用。

有什么解决方法吗？

【参考方案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 通常用于嵌套选项的。

【讨论】：

搜索框不能很好地使用这种方法。例如。如果您在选项 2 下添加子选项 4 并搜索 sub，您将不知道子选项属于哪个类别，因为 1 级类别将从结果中排除。