「シフト」キーを使用して複数のアイテムを選択

Question

私はselect2 v.3.5.1を使用しています。複数のアイテムを選択する必要があります。私は、shiftキーを使って複数のアイテムを選択することは可能でしょうか？私はmultiple selectを持っていたくない場合は、shiftキーを押しながらいくつかのオプションを選択してください。コードスニペットは大変ありがとうございます。

Answer 1

ctrlキーを押して実行できます。 とにかく他のプログラムのリスト内の個々の項目を選択している場合は、デフォルトのキーが押されます。

Answer 2

私が正しく理解している場合の回答可能な解決策をに基づいてすることができます。

• は
• あなたの選択にデータ-maxitemを追加するときたわごとキーを検出するために、委任イベントリスナーを追加イベントがDIV
に結果を書き終わり
• を防止しなければならない場合SELECT2-選択テストに
• を選択

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