使用“shift”键选择多个项目答案

【问题标题】：Select multiple items using "shift" key使用“shift”键选择多个项目
【发布时间】：2017-07-22 16:10:02
【问题描述】：

我使用 select2 v.3.5.1 并且需要选择多个项目。我想知道，是否可以使用shift 键选择多个项目？我不想拥有multiple select，只需在按住shift 键的同时选择几个选项。非常感谢代码 sn-p。

【问题讨论】：

标签： javascript jquery select jquery-select2

【解决方案1】：

如果我正确理解了答案，可能的解决方案可以基于：

将 data-maxitem 添加到您的选择中
添加一个委托事件监听器，以便在选择时检测屎键
在 select2-selecting 上测试是否必须阻止事件
最后将结果写入div

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

【讨论】：

【解决方案2】：

您可以通过按住 ctrl 键来执行此操作。如果您在其他程序的列表中选择单个项目，那么这是默认按键。

【讨论】：