【Layui Select 】Layui 动态向 Select 追加元素

最新推荐文章于 2025-09-11 02:15:30 发布

原创最新推荐文章于 2025-09-11 02:15:30 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript

Layui 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Layui框架在Select元素中动态加载数据，包括使用Ajax获取数据、清空旧选项、追加新选项以及务必调用form.render()进行渲染的过程。

Layui 动态向 Select 追加元素

layui的select数据追加注意3点：

第一点：当前节点追加数据
第二点：layui框架select追加数据
第三点： form.render();//必须要写，不写的话，地区的option不进行渲染

HTML 代码

<select id="rolename" name="rolename"></select>

Layui 代码

layui.use(['form','element'], function(){
        var $ = layui.$,form = layui.form;
        //动态加载 角色下拉
        $.ajax({
            url: '/admin/role', // 数据接口地址
            //type: 'POST', // 请求方式
            data:{param:'roleSelect'},
            dataType: 'json', // 数据格式
            success: function(res) {
                var data = res.data;
                console.log(res);
                var length = res.data.length;
                var html='';
                layui.each(data, function(index, item){
                    console.log(index); // 得到下标
                    console.log(item); // 得到数据
                    html=html+"<option value="+ index +">"+ item +"</option>";
                });

                //清空之前数据
                $("#rolename").empty();
                //指定节点追加数据
                $("#rolename").append(html);
                //必须渲染一下，否则不出显示下拉数据
                form.render();
            }
        });
});