多选下拉框选中底部选项自动滚顶问题的解决请求

问题出在原生<select multiple>的默认行为：当点击选项时，浏览器会自动将<select>元素滚动到视口范围内，而你的自定义组件中<select>是绝对定位在触发标签下方，点击底部选项时触发了这个原生滚动行为，导致页面滚到顶部。

修复方法 #

方法一：修改JavaScript代码阻止select获取焦点

在选项的mousedown事件处理中，增加阻止<select>元素获取焦点的操作，避免触发原生滚动：

$('select.select option').on('mousedown', function (e) {
    e.preventDefault();
    e.stopPropagation();
    // 新增：阻止select获取焦点，避免触发原生滚动
    $(this).parent('select').blur();
    
    var langs = [];
    if ($(this).parent('select')[0].hasAttribute('multiple')) {
        // toggle selection
        if ($(this)[0].hasAttribute('selected')) {
            $(this)[0].removeAttribute('selected');
        } else {
            $(this)[0].setAttribute('selected', '');
        }

        // Set label value
        var selected = $(this).parent('select').find('option:selected', this);
        selected.each(function() {
            langs.push($(this).data('language_name'));
        });
        $(this).parent().siblings('label.label-title').html(langs.join(", ") || "-- Select languages --");
    }
    if ($(this).parents('.select-dropdown').hasClass('select-required')) {
        if (langs.length < 1) {
            $(this).parents('.select-dropdown').find('.alert-error', this).show();
        } else {
            $(this).parents('.select-dropdown').find('.alert-error', this).hide();
        }
    }
});

方法二：给select添加tabindex属性

直接给<select>标签添加tabindex="-1"属性，让它无法被聚焦，从根源上避免触发聚焦后的滚动行为：

<select class="select" name="multi_languages[]" multiple="" tabindex="-1">
    <!-- 选项内容 -->
</select>

这两种方法都可以阻止浏览器因<select>聚焦而触发的页面滚动，解决选中底部选项时页面滚顶的问题。

内容的提问来源于stack exchange，提问作者Emma Ngo