即使使用 CTRL 也限制 select2 选择

Question

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

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

只允许用户从 select2 下拉菜单中选择 3 个项目。

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

有没有办法在进行 CTRL 选择时检查选择限制？如果不这样做，我可以禁用 CTRL 选择功能吗？ （我在文档中找不到此选项..）

请看下面我的复制品。尝试先进行 3 个以上的选择，方法是分别单击它们，然后按住 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>

Answer 2

当

启用SELECT 2下拉列表时，可以禁用 Ctrl KBD>键

    document.onkeydown = function (e) {
        e = e || window.event;//Get event
        if (e.ctrlKey) {

          if($('body').find('.select2-container--open').length) //check if select2 dropdown is open
          {
            var c = e.which || e.keyCode;//Get key code
            switch (c) {
                case 83://Block Ctrl+S
                case 87://Block Ctrl+W --Not work in Chrome
                    e.preventDefault();     
                    e.stopPropagation();
                break;
            }
        }


     }
    };