当前位置: 首页 > news >正文

使用 Layui 的 template 模块来动态加载select选项

可以使用 Layui 的 template 模块来动态加载选项,如下所示:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Layui 动态模板示例</title><link rel="stylesheet" href="path/to/your/layui/css/layui.css"><script src="path/to/your/layui/layui.js"></script>
</head>
<body><div class="layui-input-inline"><select name="moduleId" lay-filter="moduleId"><option value="">请选择模块</option></select>
</div><script>layui.use(['admin', 'form'], function () {var $ = layui.$,form = layui.form,admin = layui.admin;// 加载模块列表admin.req({url: '/api/security/module/list?pageNumber=1&pageSize=10000',dataType: 'json',success: function (r) {var options = '';layui.each(r.body.rows, function (index, item) {options +='<option value="' + item.id + '">' + item.name + '</option>';});// 渲染选项$('select[name="moduleId"]').html(options);form.render('select'); // 重新渲染 select 组件}});// 监听 select 组件的 change 事件layui.form.on('select(moduleId)', function (data) {console.log('选中的值为:', data.value);});});
</script></body>
</html>

在这个示例中,我们首先定义了一个 select 组件,并使用 Layui 的 admin.req 方法来动态加载选项。然后,我们使用 jQuery 将选项插入到 select组件中,并使用form.render(‘select’)方法重新渲染select` 组件。

请注意,您需要根据您的实际需求修改 URL 和数据处理逻辑。同时,您还可以使用其他 Layui 组件和方法来实现更复杂的功能。

http://www.lryc.cn/news/264076.html

相关文章:

  • 《数据分析-JiMuReport》积木报表详细入门教程
  • React面试题:React.Component和React.PureComponent的区别?
  • 力扣:203. 移除链表元素(Python3)
  • 微信小程序-选择和分割打开地图选择位置的信息
  • Flink Table API 与 SQL 编程整理
  • 华为OS与麒麟OS:华为自研操作系统的对决
  • Java解决比特维位计数
  • 【深度学习目标检测】九、基于yolov5的路标识别(python,目标检测)
  • PyCharm添加自动函数文档注释
  • 数字图像处理 基于Numpy、PyTorch在频率空间中建模运动模糊
  • 海康威视对讲广播系统 RCE漏洞复现(CVE-2023-6895)
  • 【优化】Springboot 修改 tomcat连接池
  • 百度侯震宇:AI原生与大模型将从三个层面重构云计算
  • 【SpringBoot快速入门】(2)SpringBoot的配置文件与配置方式详细讲解
  • 麒麟V10 ARM 离线生成RabbitMQ docker镜像并上传Harbor私有仓库
  • AI创作系统ChatGPT商业运营网站系统源码,支持AI绘画,GPT语音对话+DALL-E3文生图
  • 剑指offer题解合集——Week1day5
  • Redis设计与实现之数据库
  • 如何在Eclipse中安装WindowBuilder插件,详解过程
  • node.js mongoose schemaTypes
  • 论文解读:On the Integration of Self-Attention and Convolution
  • 【Spring】15 ApplicationContextAware 接口
  • Android 版本控制工具--Git
  • Wireshark高级网络安全分析
  • llvm后端之DAG设计
  • 反序列化 [SWPUCTF 2021 新生赛]ez_unserialize
  • centos(linux)安装jenkins
  • Wireshark统计和可视化
  • 高通平台开发系列讲解(SIM卡篇)SIM软件架构介绍
  • 音频筑基:瞬态、基音、偏噪信号类型分析