layui下拉框怎么在点击时才加载远程数据

轻明小哥_3350

轻明小哥_3350

2026-09-17

337人浏览

原创

要实现 layui 下拉框点击才加载数据,需禁用自动请求:不传 url、初始 disabled,监听 .layui-select-title 点击,用状态锁防重复,请求后替换 option 并 form.render('select', 'filter')。

layui下拉框怎么在点击时才加载远程数据

layui 下拉框 click 时才触发远程加载

默认 layui.select 的 url 参数会在渲染时自动发起请求,这不是“点击才加载”。要实现真正的懒加载(click 触发),必须绕过内置的 url 自动行为,改用手动控制。

禁用自动加载并监听 click 事件

关键点是:不传 url,把下拉框设为 disabled 初始状态,等用户点击再启用并手动拉取数据。否则即使没设 url,某些版本的 layui(尤其 2.8+)仍可能因 elem.next() 渲染逻辑触发空请求或报错。

  • 给 select 元素加 lay-filter="mySelect",便于监听
  • 初始化时不调用 form.render('select'),避免提前渲染
  • 用 $(document).on('click', '.layui-select-title', ...) 捕获点击(因为真实下拉触发区域是 .layui-select-title)
  • 首次点击后,用 $.get() 请求数据,拼成 option 字符串,注入到 select 内,再执行 form.render('select')

防止重复请求和 loading 状态处理

用户快速连点、或下拉已展开时再点标题,都可能导致多次请求或 DOM 错乱。需要状态锁 + 条件判断:

  • 用一个变量如 isLoaded = false 标记是否已加载过
  • 在 click 回调开头加 if (isLoaded || $('select[name="xxx"]').next().hasClass('layui-hide')) return;
  • 点击后立即给 .layui-select-title 加 layui-disabled 类,内部显示 “加载中…” 文本(可选)
  • 请求成功后移除禁用态、更新 isLoaded = true,再调用 form.render()

注意:不要在请求前清空 select 的 option —— 否则用户第一次点击后看到空白再闪现选项,体验差;应只在请求返回后再替换内容。

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

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

下载

兼容性与 layui 版本差异

layui 2.7.x 和 2.8.x 对 form.render() 的行为略有不同:2.8+ 在已有下拉展开状态下再次 render 可能不刷新选项列表。稳妥做法是:

  • 请求完成后,先 $('select[name="xxx"]').empty()
  • 再 .append(...) 新的 option
  • 最后 form.render('select', 'your-filter')(第二个参数必须传 filter 值)

如果用了 layUI 的模块化引入(layui.use(['form'], ...)),确保 form 实例已就绪再绑定 click;否则 form.render 可能未定义。

最易被忽略的是:下拉框的 name 属性必须存在且唯一,否则 form.render 找不到对应元素;另外,服务端返回的数据格式必须是纯 HTML option 片段(如 ),不能是 JSON —— layui 不会自动转换。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3280

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

3113

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

2026.11.05

0

12

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

2026.11.05

0

12

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

2026.11.04

0

16

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

2026.11.04

0

15

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

2026.11.04

0

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习