layui form 组件动态添加下拉框数据

1.html代码

 <form  class="layui-form" style="margin-top: 50px;">
        <div class="layui-form-item">
            <label class="layui-form-label">上级</label>
            <div class="layui-input-block">
                <select name="pid" id="labelListpid">
                    <option value="0">根目录</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" class="form-control" id="labelname" name="name" placeholder="请输入名称">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" class="form-control" id="labelsort" name="sort" placeholder="请输入排序号">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展示</label>
            <div class="layui-input-block">
                <input type="radio" name="isshow" value="1" title="是" checked="">
                <input type="radio" name="isshow" value="0" title="否">
            </div>
            <div class="layui-form-mid layui-word-aux">根目录除外，默认其他层级是否显示</div>
        </div>
    </form>
    <div style="width: 100%;text-align: center">
        <button type="button" class="layui-btn layui-btn-normal" style="width: 200px;" onclick="submitLabel()">提交数据</button>
    </div>

 

2.js代码

var table;
    var form;
    
    layui.use(['form'], function(){
    form = layui.form;
    form.render();

3.接口数据

function getmList() {
        $.ajax({
            type:'POST', // 规定请求的类型（GET 或 POST）
            url:'接口地址', // 请求的url地址
            dataType:'json', //预期的服务器响应的数据类型
            data:{
            },//规定要发送到服务器的数据
            beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）
                // ....
            },
            success: function(result){ // 当请求成功时运行的函数
                //...
                $("#labelListpid").html('');
                $("#labelListpid").prepend('<option value="0">根目录</option>');
                if(result.length > 0){
                    $.each(result,function (index,item) {
                        var htmls = '<option value="'+item.id+'">'+item.name+'</option>';
                        $("#labelListpid").append(htmls);
                    })
                    form.render('select');    //重新渲染
　　　　　　　　　　　form.render('select','pid');  //指定select框重新渲染
                    addLabelmodel = layer.open({
                                        type: 1,
                                        skin: 'layui-layer-rim', //加上边框
                                        area: ['800px', '640px'], //宽高
                                        content: $("#labeladdBox"),
                                        cancel: function(){
                                            // 右上角关闭事件的逻辑
                                            $("#labeladdBox").hide();
                                        },
                                    });
                }
            },
            error:function(result){ //失败的函数
                //...
            },
            complete:function(){ //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
                // ...
            }
        });
    }

4.重点：数据请求成功之后拼接成功，记得重新渲染表单