使用 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 组件和方法来实现更复杂的功能。

相关推荐
mCell14 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip14 小时前
Node.js 子进程:child_process
前端·javascript
excel17 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel18 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼19 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping19 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙20 小时前
[译] Composition in CSS
前端·css
白水清风20 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix21 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780021 小时前
new、原型和原型链浅析
前端·javascript