select2 为您提供了一个选项来限制用户所做的选择,即:
$('.select2').select2({
maximumSelectionLength: 3
});
只允许用户从 select2 下拉列表中选择 3 项。
当用户使用 Ctrl 选择多个选项时会出现此问题 - select2 不会限制用户以这种方式选择时所做的选择。
有没有办法在进行 CTRL-选择时检查选择限制?如果失败,我可以禁用 CTRL 选择功能吗? (我在文档中找不到此选项。)
请参阅下面我的复制品。尝试先单独单击多个选项,然后按住 CTRL 键单击它们而不关闭下拉列表。
(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>
最佳答案
您可以监听 select2:selecting
事件,如果已经选择了 3 个项目,则阻止该事件。
目前,我只是阻止用户选择第四个值,但如果您愿意,您可以选择显示警告消息。
(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>
关于jquery - 即使使用 CTRL 也限制 select2 选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46174674/