Limiting select2 selections even when CTRL is used

+1 vote
asked Sep 12, 2017 by george

select2 provides an option for you to limit the selections that are made by the user, I.E.:

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

Would only allow the user to select 3 items from the select2 dropdown.

The issue occurs when the user uses Ctrl to select multiple options - select2 doesn't limit the selections made when the user selects in this fashion.

Is there a way to check the selection limit whenever a CTRL-selection is made? Failing that can I disable the CTRL-select functionality? (I couldn't find an option for this in the docs..)

See my reproduction below. Try making more than 3 selections first by clicking them individually and then by CTRL-clicking them without closing the drop-down.

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

2 Answers

0 votes
answered Sep 12, 2017 by rahul-s-r

You can disable the Ctrl key when the select 2 dropdown is enabled by

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


     }
    };
0 votes
answered Sep 12, 2017 by nisarg-shah

You can listen to the select2:selecting event and prevent the event if already 3 items are selected.

At the moment, I am just preventing the user from selecting the fourth value, but you may choose to display a warning message if you want.

(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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...