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

问题描述

自己想实现动态渲染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')

    });
});

随手点赞一次，运气增加一份