layui——动态渲染下拉框

本文介绍如何使用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);
            }
        }
    });
}

结果

如果class未添加layui-form,则效果如下(样式丢失)

如果未执行layui.form.render("select"),则效果如下(没有赋值上去)

如果万事具备,则如下

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

My name is Red ^^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值