Wählen Sie mehrere Elemente mit "Shift" -Taste

Question

Ich benutze Select2 v.3.5.1 und müssen mehrere Elemente auswählen. Ich frage mich, ist es möglich, mehrere Elemente mit shift Schlüssel auszuwählen? Ich möchte keine multiple select haben, wählen Sie einfach ein paar Optionen, während Sie shift Schlüssel halten. Ein Code-Snippet wird sehr geschätzt.

Answer 1

Sie können es tun, indem Sie die STRG-Taste gedrückt halten. Dies ist die Standardtaste, die gedrückt werden soll, wenn Sie in einer Liste in anderen Programmen trotzdem einzelne Elemente auswählen.

Answer 2

Wenn ich das richtig verstanden, die Antwort eine mögliche Lösung auf Basis werden können:

• fügen Sie ein Daten maxitem zu Ihrem wählen
• einen delegierten Ereignis-Listener hinzufügen, um die Scheiße Schlüssel zu erkennen, wenn Auswählen
• auf select2-Auswahl Tests, ob das Ereignis
• am Ende schreibt das Ergebnis in die div verhindert werden muss

$(document).on('keyup keydown', ".select2-drop-active", function (e) { 
 
    console.log('shift: ' + e.shiftKey); 
 
    if (e.shiftKey) { 
 
     $("#mySelect1").attr('multiple', 'multiple'); 
 
    } else { 
 
     $("#mySelect1").removeAttr('multiple'); 
 
    } 
 
}) 
 
$("#mySelect1").select2() 
 
     .on('select2-selecting', function (e) { 
 
      var maxItem = $('#mySelect1').data('maxitem'); 
 
      var shiftKey = $("#mySelect1").attr('multiple') == 'multiple'; 
 
      var seletedOpt = $('.select2-drop-active .mySelected').length; 
 
      console.log('maxItem: ' + maxItem + ' shiftKey: ' + shiftKey + ' seletedOpt: ' + seletedOpt); 
 
      if (shiftKey && seletedOpt < maxItem) { 
 
       $('.select2-drop-active .select2-highlighted').addClass('mySelected'); 
 
       if ($('.select2-drop-active .mySelected').length >= maxItem) { 
 
        $("#mySelect1").removeAttr('multiple'); 
 
        var selectedOption = $('.select2-drop-active .mySelected').map(function (idx, ele) { 
 
          return ele.textContent; 
 
        }).get().join(' '); 
 
        setTimeout(function() { 
 
         $('.select2-container a span:first').text(selectedOption); 
 
        }, 100, selectedOption); 
 
       } else { 
 
        e.preventDefault(); 
 
       } 
 
      } else { 
 
       $("#mySelect1").removeAttr('multiple'); 
 
      } 
 
     });

.mySelected { 
 
    background: #3875d7; 
 
    color: #fff; 
 
}

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

 

 
<select id="mySelect1" data-maxitem="2" style="width: 100%;"> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="opel">Opel</option> 
 
    <option value="audi">Audi</option> 
 
</select>