layui下拉框怎么实现鼠标滚动翻页加载-Layui教程-PHP中文网

layui下拉框滚动加载需监听.layui-select-down的scroll事件，先设置overflow-y: auto，用事件委托绑定，触底时动态追加dd并同步select的option，确保lay-value与value一致。

layui下拉框怎么实现鼠标滚动翻页加载

layui下拉框怎么触发滚动事件监听

原生 select 元素不支持滚动加载，Layui 的 lay-select 本质是用 div 模拟的下拉面板（.layui-select-title + .layui-select-down），真正可滚动的是下拉菜单容器 .layui-select-down。必须监听它的 scroll 事件，而不是 select 标签本身。

注意：Layui 2.8+ 默认禁用下拉面板的原生滚动条（通过 overflow: hidden），需先显式开启：

.layui-select-down {
  overflow-y: auto !important;
}

否则 scroll 事件根本不会触发。

如何在 lay-select 下拉中绑定 scroll 加载逻辑

不能在 form.render('select') 后直接对 .layui-select-down 绑定事件——它每次点击下拉都会被重新渲染（DOM 替换），之前的事件监听会丢失。

正确做法是使用事件委托，并确保监听器挂载在稳定父节点上（如 body 或 .layui-form）：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

$('body').on('scroll', '.layui-select-down', function() {
  const $down = $(this);
  if ($down.scrollTop() + $down.innerHeight() >= $down[0].scrollHeight - 10) {
    // 触底，触发加载
    loadMoreOptions($down.data('field'));
  }
});

$down.data('field') 是你在 select 标签上写的 lay-filter="xxx" 值，用于区分不同下拉框
判断条件里减去 10 是防抖容差，避免因像素计算误差漏触发
务必检查 $down[0].scrollHeight 是否已就绪——首次打开时 DOM 可能未完全渲染，建议加 setTimeout(..., 0) 延迟执行判断

加载新选项后怎么动态追加并保持 Layui 样式

Layui 不会自动识别手动插入的 option 或 dd，必须用它的 DOM 结构规范追加内容：

不要往 select 标签里加 <option></option>，而是往 .layui-select-down 内部的 dl 里追加 dd：

const $dl = $down.find('dl');
$dl.append('

新选项A

新选项B

'); // 然后手动触发一次 click 事件让 Layui 重绑事件 $dl.find('dd').last().trigger('click');

每个 dd 必须带 lay-value 属性，否则选中后无法回填值
追加后不调用 form.render() —— 它会重绘整个 select，清空已加载内容
如果需要高亮已选值，得手动给对应 dd 加 layui-this 类

为什么滚动加载后选择失效或值不回填

常见原因是：新追加的 dd 缺少 lay-value，或原始 select 中没有对应 option。Layui 在选中时会反查 select 的 option[value="..."] 并同步 selected 状态。

解决方法只有两个：

动态向真实 select 追加 <option value="101">新选项A</option>（推荐，兼容性最稳）
或在选中后手动设置 select 的 value 并触发 change 事件：$select.val('101').trigger('change')
若用异步加载，记得在 loadMoreOptions 回调里统一处理 DOM 插入和 select 同步，避免竞态