选择框级联代码

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);
                }
            })
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值