讲师中心 微信公众号
AI工具推荐 视频效率加速

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

轻明小哥_3350

轻明小哥_3350

发布时间:2026-09-17 10:44:20

|

337人浏览过

|

来源于php中文网

原创

要实现 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 片段(如 <option value="1">苹果</option>),不能是 JSON —— layui 不会自动转换。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
ajax教程
ajax教程

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

2980

2023.06.14

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

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

360

2023.08.31

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

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

2793

2023.11.15

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

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

1161

2024.09.24

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

0

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

0

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

0

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

0

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13万人学习

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

共89课时 | 11.2万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn