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

最新推荐文章于 2024-09-06 16:13:14 发布

guochangjin

最新推荐文章于 2024-09-06 16:13:14 发布

阅读量1.4k

点赞数 10

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/guochangjin/article/details/135114151

版权

Layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

可以使用 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>