Layui 实现三级联动

html，我这里使用的是jsp，所以用到了c标签，如果是html的可以使用ajax来初始化顶级分类

        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <select name="tag1" lay-filter="tag1" lay-verify="required">
                    <option value="">请选择一级分类</option>
                    <c:forEach items="${tags1 }" var="tag">
                        <option value="${tag.id}">${tag.name}</option>
                    </c:forEach>
                </select>
            </div>

            <div class="layui-input-inline" >
                <select name="tag2" lay-filter="tag2" lay-verify="required">
                    <option value="">请选择二级分类</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="tag3" lay-filter="tag3" lay-verify="required">
                    <option value="">请选择三级分类</option>
                </select>
            </div>
        </div>

js，监听一级二级分类下拉框选择事件，动态查询数据库分类

     
    form.on('select(tag1)', function (data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            var parentId = data.value;
            if (parentId === "" || parentId < 1) {
                return;
            }

            $.post("${baseUrl }/cms/admin/knowlege/getchildrentags", {parentId: parentId}, function (res) {
                if(res.code==0){
                   var tag2List= res.result;
                   var options="";
                    for (var i = 0; i < tag2List.length; i++) {
                        var tag = tag2List[i];
                        options+=' <option value="'+tag.id+'">'+tag.name+'</option>';
                    }
                    $("select[name='tag2']").html(options)
                    //初始化子分类
                    //参数1 type  参数2 filter
                    form.render('select');
                }
                else{
                    layer.msg('系统异常！', {icon: 5});
                }
            })
        });



        form.on('select(tag2)', function (data) {
            var parentId = data.value;
            if (parentId === "" || parentId < 1) {
                return;
            }
            $.post("${baseUrl }/cms/admin/knowlege/getchildrentags", {parentId: parentId}, function (res) {
                if(res.code==0){
                    var tag3List= res.result;
                    var options="";
                    for (var i = 0; i < tag3List.length; i++) {
                        var tag = tag3List[i];
                        options+=' <option value="'+tag.id+'">'+tag.name+'</option>';
                    }
                    $("select[name='tag3']").html(options)
                    //初始化子分类
                    //参数1 type  参数2 filter
                    form.render('select');
                }
                else{
                    layer.msg('系统异常！', {icon: 5});
                }
            })
        });