实现HTML下拉框滚动加载数据（替代按钮触发）

核心逻辑 #

针对原生<select>下拉框，通过监听滚动事件判断是否触底，触发AJAX请求获取下一页数据，清空原有选项后加载新数据，同时通过分页参数（skip/take）控制数据范围，避免重复请求。

1. 调整HTML（使用@Html.DropDownList） #

生成带明确ID的空下拉框，后续动态加载数据：

@Html.DropDownList(
    "Customer_1", 
    new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), 
    "Select a Record", 
    new { @class = "form-select form-select-sm", id = "customerDropdown" }
)

• 初始传入空SelectList，数据将通过JS动态填充
• 保留默认占位文本Select a Record

2. 修改jQuery代码（滚动触底加载逻辑） #

替换原按钮点击逻辑，改为滚动监听+自动加载：

$(document).ready(function () {
    var skip = 0;
    var take = 10;
    var $dropdown = $("#customerDropdown");
    var isLoading = false; // 防止滚动时重复触发请求
    var hasMoreData = true; // 标记是否还有更多数据可加载

    // 加载初始第一页数据
    loadRecords(skip, take);

    // 监听下拉框滚动事件
    $dropdown.on("scroll", function () {
        // 判断是否滚动到底部：滚动距离 + 可视高度 >= 总滚动高度
        if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight && hasMoreData && !isLoading) {
            isLoading = true;
            skip += take;
            loadRecords(skip, take);
        }
    });

    function loadRecords(skip, take) {
        fetchRecords(skip, take);
    }

    function fetchRecords(skip, take) {
        $.ajax({
            url: '/Customer/GetRecords',
            type: 'GET',
            data: { skip: skip, take: take },
            beforeSend: function() {
                // 可选：添加加载提示
                $dropdown.append('<option value="" disabled>Loading...</option>');
            },
            success: function (data) {
                // 移除加载提示
                $dropdown.find('option[disabled]').remove();
                
                if (data && data.length > 0) {
                    // 清空原有选项，保留默认占位符
                    $dropdown.find('option:not(:first)').remove();
                    
                    // 遍历添加新数据选项
                    $.each(data, function(index, record) {
                        var displayText = record.lastName + ", " + record.firstName;
                        $dropdown.append(new Option(displayText, record.id)); // 假设record包含id字段作为option的value
                    });
                } else {
                    hasMoreData = false; // 无更多数据，停止触发加载
                }
                isLoading = false;
            },
            error: function (error) {
                console.log('加载失败:', error);
                $dropdown.find('option[disabled]').remove();
                isLoading = false;
            }
        });
    }
});

关键优化点： #

• isLoading锁：防止滚动时多次触发AJAX请求
• hasMoreData标记：无数据后不再触发加载逻辑
• 滚动触底判断：通过scrollTop + innerHeight >= scrollHeight精准判断
• 数据替换逻辑：清空原有非占位选项，仅保留新加载的数据

3. 后端Controller方法（无需修改） #

原分页接口可直接复用，确保返回分页后的Customer列表：

[HttpGet]
public IActionResult GetRecords(int skip, int take)
{
    try
    {
        var records = _customerAppService.Value.GetCustomerSimpleListforCombineCust(skip, take)
            .OrderBy(x => x.LastName)
            .ToList();
        return Json(records);
    }
    catch(Exception ex)
    {
        LogError(ex.Message, ex, this.getActionName(), this.getControllerName());
        return Json(new ResponseResultViewModel(RBCSConsts.JsonFailureMessage).Failure());
    }
}

额外注意事项 #

1. 给下拉框设置滚动样式：

.form-select.form-select-sm {
    max-height: 200px;
    overflow-y: auto;
}

确保下拉框有固定高度，滚动事件可正常触发。

2. 保留已选值（可选）：
   如果需要保留用户之前选中的选项，可在清空数据前记录选中值，加载新数据后恢复：

// 清空前记录选中值
var selectedValue = $dropdown.val();
// 清空选项...
// 加载新数据后恢复选中
$dropdown.val(selectedValue);

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