Layui 动态渲染select框

 描述: 选择部门,出来对应部门下面的分组,HTML代码如下:

<form class="layui-form" name="myform" method="post" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-inline">
                <select class="seloption" lay-filter="departmentid" name="departmentid" id="departmentid">
                    <option value="1">部门1</option>
                    <option value="2">部门2</option>
                    <option value="3">部门3</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">分组</label>
            <div class="layui-input-inline layui-form" lay-filter="group">
                <select class="seloption" name="groupid" id="groupid">
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left:15rem">
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="submitAdd">提交</button>
        </div>
    </div>
</form>

 js代码如下:

layui.use(['element', 'layer','form'], function () {
    var element = layui.element,
        form = layui.form,
        layer = layui.layer;
    form.on('select(departmentid)', function(data){
        console.log(data.value);
        $.ajax({
            type:'post',
            url:'index',
            data:{departmentid:data.value},
            dataType:'json',
            async:true,
            success:function(datas){ 
                if(datas == 9){
                    var option = '';
                    for(var i=0;i<datas.length;i++){ 
                        //循环获取返回值，并组装成html代码
                        option +="<option value='"+datas[i].groupid+"'>"+datas[i].groupname+"</option>";
                    }
                }else{
                   var option = '<option value="0">请选择</option>';  //默认值
                }
                $("#groupid").html("");
                $("#groupid").append(option);
                form.render('select','group');
            },
        });
    });
}); 

好了,这次应该记住了吧,每次遇到这儿每次都要耽误时间琢磨, 真的是好记性不如烂笔头!