layui 下拉框动态赋值

最新推荐文章于 2025-04-02 16:31:45 发布

杨艳芳

最新推荐文章于 2025-04-02 16:31:45 发布

阅读量4.4k

点赞数 2

分类专栏： Layui 文章标签： javascript css jquery html html5

本文链接：https://blog.youkuaiyun.com/weixin_37758015/article/details/108417733

版权

Layui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在layui中实现下拉框的动态赋值，重点在于通过JavaScript获取远程数据，然后将数据生成的option元素追加到select标签中，并使用layui的form.render方法更新显示。

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

本文主要解决的问题：
有些下拉框的数据需要从远程获取，这是需要将远程获取的值动态的赋值到下拉框中。

核心代码部分为：
在select标签上面的class属性中加一公共类名称，newclassname
界面加载完成时请求远程数据，将返回的数据渲染到多个option标签中
获取到上面定义的类名对应的jquery对象，调用append方法，将多个option标签追加到select标签中
最后要重新渲染一下select标签，layui.form.render(‘select’); 否则可能还是会不展示下拉数据

<div class="layui-form-item">
    <label class="layui-form-label"><span class="star">*</span>名称：</label>
    <div class="layui-input-inline">
        <select name="" lay-filter="eventName" id="" class="layui-input newclassname">
            <option value="" selected>名称</option>
        </select>
    </div>
    <br/>
</div>
$(function(){
        $.ajax({
            type: "",//get或者post
            url: '',
            data:{},//参数 接口传参 json对象
            success: function (res) {
                if(res.data){
                    var optionHtml = '';
                    for(var i in res.data){
                        var value1 = res.data[i]['value1'];
                        var value2 = res.data[i]['value2'];
                        optionHtml += "<option value='" + value1 + "'>" + value2 + "</option>";
                    }
                    $('.newclassname').append(optionHtml);
                    layui.form.render('select');
                }
            }
        });
})