layui——动态渲染下拉框

最新推荐文章于 2025-06-01 09:01:01 发布

原创最新推荐文章于 2025-06-01 09:01:01 发布 · 1.9w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#layui #select

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用layui框架动态地为下拉框添加选项并保持原有样式不变。通过在HTML中设置正确的class属性，并在JavaScript中调用layui.form.render()方法来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正经学徒，佛系记录，不搞事情

吐槽一句：网上的那些“朋友”，既然想要分享就请分享的完整一点，难道不知道“代码给一半，**短一半吗的道理吗”

需求

动态的给下拉框赋值，且仍具有layui的样式

实现

html代码，保留一个请选择（可去除，默认下拉会选择第一个）

最重要的是这个class属性layui-form，很多人是因为没有添加这个属性导致layui.form.render()重新渲染无效

<div class="x-body layui-form">
    <select name="classifyId" id="classifyId">
        <option value="">请选择</option>
    </select>
</div>

js代码，layui.use中一定要添加form属性

layui.use('form', function(){
    getClassify();
}

function getClassify(){
    $.ajax({
        url:$.mn.constant.url+'/classify',
        success:function(res){
            if(res.success){
                for(var i =0;i<res.data.classify.length;i++){
                    $("#classifyId").append("<option value=\""+res.data.classify[i].classifyId+"\">"+res.data.classify[i].classifyName+"</option>");
                }
                //重新渲染
                layui.form.render("select");
            }else{
                layer.msg(res.message);
            }
        }
    });
}