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

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架