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

相关推荐
gnip1 分钟前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员19 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘24 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出26 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的26 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解28 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵31 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im32 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man32 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构