如何在Bootstrap Selectpicker中实现鼠标滚动加载更多选项？

你原来的代码没生效的核心原因是：Bootstrap Selectpicker会把原生的<select>元素隐藏，生成一个自定义的下拉菜单（.dropdown-menu），直接给原生select绑定scroll事件是监听不到的，得把事件绑定到它生成的下拉菜单上。

下面是调整后的实现方案：

步骤1：确保Selectpicker已初始化 #

如果还没初始化Selectpicker，先执行初始化代码：

$('#rel_id_contact1').selectpicker();

步骤2：绑定下拉菜单的滚动事件 #

定位到Selectpicker生成的下拉菜单，监听它的滚动事件，判断滚动到底部后触发加载逻辑：

// 定位到Selectpicker生成的下拉菜单
const dropdownMenu = $('#rel_id_contact1').next('.bootstrap-select').find('.dropdown-menu');

// 绑定滚动事件
dropdownMenu.on('scroll', function() {
    // 判断是否滚动至底部（留1px的容错空间）
    if ($(this).scrollTop() + $(this).innerHeight() + 1 >= $(this)[0].scrollHeight) {
        // 这里编写加载更多选项的逻辑
        // 示例AJAX加载（根据实际接口调整）：
        /*
        // 避免重复请求的标记
        if (window.isLoading) return;
        window.isLoading = true;

        $.ajax({
            url: '/api/get-more-contacts',
            type: 'GET',
            data: { page: window.currentPage || 1 },
            success: function(res) {
                // 动态添加新选项到原生select
                res.forEach(item => {
                    $('#rel_id_contact1').append(`<option value="${item.id}">${item.name}</option>`);
                });
                // 刷新Selectpicker，让新选项显示出来
                $('#rel_id_contact1').selectpicker('refresh');
                // 更新页码
                window.currentPage = (window.currentPage || 1) + 1;
                window.isLoading = false;
            },
            error: function() {
                window.isLoading = false;
            }
        });
        */
        console.log('滚动到底部，触发加载更多');
    }
});

关键注意事项 #

• 必须在Selectpicker初始化完成后再绑定滚动事件，否则找不到下拉菜单元素。
• 加入isLoading标记防止重复请求，避免滚动到底部时多次触发加载。
• 如果你的Selectpicker是动态生成的（比如通过AJAX加载后创建），需要在元素生成完成后再执行上述绑定代码。

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