Question

select2提供了一个限制用户选择的选项，例如：

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

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

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

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

请参阅下面的复制品。首先单独单击它们，然后按住CTRL键单击它们而不关闭下拉列表，首先尝试进行3次以上的选择。

＆＃13;

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

＆＃13;

body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 1

启用选择2下拉列表时，您可以禁用 Ctrl 键

    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;
            }
        }


     }
    };

Answer 2

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

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

＆＃13;

(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);

＆＃13;

body{
  font-family: sans-serif;
}

.select2{
  width: 100%;
}

＆＃13;

<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>

＆＃13;

即使使用CTRL，也限制select2选项

2 个答案: