jquery - 即使使用 CTRL 也限制 select2 选择

Question

select2 为您提供了一个选项来限制用户所做的选择，即:

$('.select2').select2({
    maximumSelectionLength: 3
});

只允许用户从 select2 下拉列表中选择 3 项。

当用户使用 Ctrl 选择多个选项时会出现此问题 - select2 不会限制用户以这种方式选择时所做的选择。

有没有办法在进行 CTRL-选择时检查选择限制？如果失败，我可以禁用 CTRL 选择功能吗？ (我在文档中找不到此选项。)

请参阅下面我的复制品。尝试先单独单击多个选项，然后按住 CTRL 键单击它们而不关闭下拉列表。

(function($){
  $('.select2').select2({
    maximumSelectionLength: 3
  });
})(jQuery);

body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select2" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>

Answer 1

您可以监听 select2:selecting 事件，如果已经选择了 3 个项目，则阻止该事件。

目前，我只是阻止用户选择第四个值，但如果您愿意，您可以选择显示警告消息。

(function($){
  $('.select2').select2({
    maximumSelectionLength: 3
  });
  
  $(".select2").on("select2:selecting", function(e) {
    console.log($(this).val(), e.params.args.data);
    if($(this).val() && $(this).val().length >= 3) {
      e.preventDefault();
    }
  });
})(jQuery);

body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

<select class="select2" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>