layui的下拉框动态渲染注意点

最新推荐文章于 2025-09-11 02:27:39 发布

原创最新推荐文章于 2025-09-11 02:27:39 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了在layui中动态渲染下拉框内容的常见错误及正确解决方案。错误的尝试是通过原始JS写法直接操作DOM，而正确的做法是结合layui的form模块进行渲染。通过axios获取数据后，利用layui的form.render('select')方法重新渲染下拉框，确保内容更新。

问题描述

自己想实现动态渲染layui下拉框的内容，以为使用原始的js写法可以实现，结果却不可以。

错误写法

<div class="layui-input-block">
    <select name="year" lay-verify="required" id="year"></select>
</div>

axios.get('/getYearInfo').then(resp => {
        var node = document.getElementById('year');
        var son = document.createElement("option");
        son.text = resp.data[resp.data.length-1];
        son.value = resp.data[resp.data.length-1];
        node.appendChild(son);
        for(var i=0; i<resp.data.length-1; i++){
            son = document.createElement("option");
            son.text = resp.data[i];
            son.value = resp.data[i];
            node.appendChild(son)
        }
});

正确写法

layui.use(['form','element'], function(){
    var form = layui.form;
    axios.get('/getYearInfo').then(resp => {
        // Option参数说明：Option("text","value")
        $("#year").append(new Option(resp.data[resp.data.length-1],                         
                                     resp.data[resp.data.length-1]));
        for(var i=0; i<resp.data.length-1; i++){
            $("#year").append(new Option(resp.data[i], resp.data[i]))
        }
        // 最关键需要重新渲染下拉框
        form.render('select')

    });
});