选择框级联代码

1.前台选择框

注意：form.on(‘select(tutorialCover)’

tutorialCover是lay-filter=“tutorialCover”

       <div class="layui-form-item " >
                <label class="layui-form-label"><span class="x-red">*</span>封面：</label>
                <div class="layui-input-inline" style="z-index: 99999">
                    <select id="tutorialCoverId" lay-filter="tutorialCover">
                        <option value="" >请选择封面：</option>
                        <option th:each="cover : ${covers}"
                                th:value="${cover.id}"
                                th:text="${cover.tutorialsName}" ></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>章节名称：</label>
                <div class="layui-input-inline" style="z-index: 9999">
                    <select name="chapterId" id="chapterId">
                        <option value="">请选择章节名称：</option>
                    </select>
                </div>
            </div>

2.js选中前一个封面后，ajax调用显示章节

注意·：form.render(‘select’);否则不显示

form.on('select(tutorialCover)', function(data){
            console.log(data.value); //得到被选中的value值
            var sel = data;
            var element = layui.element;
            $.ajax({
                type: 'POST',
                url: "/chapters/chapters/tutorialCoverSelect" ,
                data : {
                    id : sel.value
                },
                success: function(data){
                    if(data.code == "1"){
                        // console.log(data.data);
                        $("#chapterId").empty();
                        $("#chapterId").append("<option value=\"\">请选择章节名称：</option>");
                        for(var item of data.data){
                            $("#chapterId").append("<option value=\""+item.id+"\">"+item.tutorialsName+"</option>");
                        }
                        form.render('select');
                    }else{
                        selfmsg('显示章节失败!');
                    }
                },
                error: function(){
                    selfmsg('显示章节异常!',5);
                }
            })
        });