Question

JSFiddle：http://jsfiddle.net/xpvt214o/776660/

我有一个多选select2控件，其高度固定为1行。当我选择新的多个项目时，它们会被添加，但是跨度不会将光标移动到“当前”框的末尾。当前选择器卡在当前行上。一旦离开选择过程，它只会移动到最后。

我尝试了这段代码，您可以对其进行注释/打开以查看原始问题：

/* Scroll CurrSel SPAN to bottom on every Select2 Select event */
/* Comment/Toggle this ON/OFF for testing */
$('#dropdown').on("select2:selecting", function(e) { 
    var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
    console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
    $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
});

这是一个改进，但是仍然存在一个问题：第一次有新条目进入下一行时，“ Curr Selection”跨度不会滚动。仅在已经输入换行符后才开始滚动。

。

目标：每次“输入换行符”时，都会自动滚动到“当前选择”的末尾。

Answer 1

只需将以下行添加到您的方法中即可。

$(".select2-selection--multiple input").focus();

所以您的方法将会

$('#dropdown').on("select2:selecting", function(e) { 
    var currselspan = $('#dropdown').next().find('.select2-selection--multiple').first();
    console.log('scrollTop = ' + $(currselspan).scrollTop() + ' scrollHeight = ' + $(currselspan).prop('scrollHeight'));
    $(currselspan).scrollTop($(currselspan).prop('scrollHeight'));
    $(".select2-selection--multiple input").focus();
});

您可以在这里进行测试。.http://jsfiddle.net/xpvt214o/776765/

Answer 2

此代码对我来说工作正常，希望对您有所帮助。

$('#selectmultiple').select2({
    closeOnSelect: false
})
 .on('select2:selecting', e => $(e.currentTarget).data('scrolltop', $('.select2-results__options').scrollTop()))
 .on('select2:select', e => $('.select2-results__options').scrollTop($(e.currentTarget).data('scrolltop')));

Select2在每次选择时将当前选择范围滚动到底部（closeOnSelect = False）

2 个答案: