jquery – Select2中的可选optgroups

<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没有携带< 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通常用于嵌套选项的内容.