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

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

html 复制代码
<!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 组件和方法来实现更复杂的功能。

相关推荐
liusheng1 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪1 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能1 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost1 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu2 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽2 小时前
react-checkbox的封装
前端
乐园游梦记2 小时前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
岁月宁静2 小时前
用 Node.js 封装豆包语音识别AI模型接口:双向实时流式传输音频和文本
前端·人工智能·node.js
猪猪拆迁队2 小时前
前端图形架构设计:AI生成设计稿落地实践
前端·后端·ai编程