jquery - Select2 - 使用 selectionAdapter 和 dropdownAdapter 时更改选项的字体大小不起作用

Question

我在我的一个选择下拉列表中使用了 Select2（4.0.8 版本）插件。引入了 Select2 的“SelectionAdapter”和“DropdownAdapter”来更改模板，以便将“选择”转换为“多选复选框”。

但是，.select2({selectionAdapter: SelectionAdapter}) 不允许我使用以下命令更改下拉菜单的字体大小，该命令在没有“selectionAdapter”的情况下有效。

$('#Question1').on('select2:open', function (e) {
    $('body').find('ul.select2-results__options').addClass('myFont2');
});

无论如何要覆盖 Select2 适配器或在适配器中合并下拉字体更改？

完整的工作代码如下：

jQuery(function($) {
  $.fn.select2.amd.require([
    'select2/selection/single',
    'select2/selection/placeholder',
    'select2/selection/allowClear',
    'select2/dropdown',
    'select2/dropdown/search',
    'select2/dropdown/attachBody',
    'select2/utils'
  ], function(SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
    var SelectionAdapter = Utils.Decorate(
      SingleSelection,
      Placeholder
    );
    SelectionAdapter = Utils.Decorate(
      SelectionAdapter,
      AllowClear
    );
    var DropdownAdapter = Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        DropdownSearch
      ),
      AttachBody
    );
    var RowSelected = $('#Question1')
    $(RowSelected).select2({
      width: 'auto',
      placeholder: 'Select multiple items',
      selectionAdapter: SelectionAdapter,
      dropdownAdapter: DropdownAdapter,
      allowClear: true,
      templateResult: function(data) {

        if (!data.id) {
          return data.text;
        }

        var $res = $('<div></div>');

        $res.text(data.text);
        $res.addClass('wrap');

        return $res;
      },
      templateSelection: function(data) {
        if (!data.id) {
          return data.text;
        }
        var RowselectedNumber = ($(RowSelected).val() || []).length;
        var RowSelectedElements = $(RowSelected).val();
        var total = $('option', $(RowSelected)).length;
        return RowselectedNumber + " of " + total;
      }
    });
  });
});

$('#Question1').on('select2:open', function(e) {
  $('body').find('ul.select2-results__options').addClass('myFont2');
  $('body').find('li.select2-results__option').addClass('myFont2');
});

.myFont2 {
  font-size: 80%;
}

.select2-results__option .wrap:before {
  font-family: fontAwesome;
  color: #999;
  content: "\f096";
  width: 25px;
  height: 25px;
  padding-right: 10px;
}

.select2-results__option[aria-selected=true] .wrap:before {
  content: "\f14a";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css" crossorigin="anonymous">

<div style="padding-bottom:2px">
  Question1
  <select id="Question1">
    <option selected id="Delhi" value="Delhi">DelhiDelhiDelhiDelhi</option>
    <option selected id="Mumbai" value="Mumbai">MumbaiMumbaiMumbaiMumbai</option>
    <option selected id="Kolkata" value="Kolkata">KolkataKolkataKolkataKolkata</option>
    <option selected id="Bengaluru" value="Bengaluru">BengaluruBengaluruBengaluruBengaluru</option>
  </select>
</div>

标签： jqueryjquery-select2jquery-select2-4