2021-06-24 layui中多个下拉列表间的禁选和取消禁选

现有大项、分项、小项三个下拉列表，实现功能：默认分项、小项是禁选，在大项选择之后分项取消禁选，分项选择之后小项取消禁选

1.添加  lay-filter="sportsTypeParent"

div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动大项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <select id="sportsTypeParent" name="sportsTypeParent" lay-filter="sportsTypeParent" lay-verify="required" >
                                                    <option value="">请选择</option>
                                                    @for(perEvent in dictSportsTypeParent){
                                                    <option value="${perEvent.eventId}">${perEvent.eventName}</option>
                                                    @}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动分项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <select id="sportsTypeBranch" name="sportsTypeBranch" lay-filter="sportsTypeBranch" lay-verify="required">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动小项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <select id="sportsTypeSon" name="sportsTypeSon" lay-verify="required">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>

2.    form.render('select');  将select的设置重新渲染

layui.use(['form', 'admin', 'ax','laydate','upload','formSelects','element', 'formSelects'], function () {
    var $ = layui.jquery;
    var $ax = layui.ax;
    var form = layui.form;
    var admin = layui.admin;
    var element = layui.element;
    var formSelects = layui.formSelects;
    var laydate = layui.laydate;
    var upload = layui.upload;

    //禁选分项和小项
    $("#sportsTypeBranch").attr("disabled","disabled");
    $("#sportsTypeSon").attr("disabled","disabled");
    form.render('select');

    // 选择大项时
    form.on('select(sportsTypeParent)', function(data){
        //分项取消禁选
        $("#sportsTypeBranch").removeAttr("disabled");
        form.render('select');

        var eventType = 2; //分项等级
        var parentId = data.value; //得到被选中的值

          $.ajax({
                type: "POST",
                url: '/perInfo/selectEvent?eventType=' + eventType + '&parentId=' + parentId,
                // data:{data},//这里data传递过去的是序列化以后的字符串
                success:function(data){
                    //每次请求完将上一次的请求结果清空，否则结果会一直叠加
                    $("#sportsTypeBranch").empty();
                    if(data == ''){
                        $("#sportsTypeBranch").append("<option value=''>暂无分项</option>");
                        form.render('select');
                    }else{
                        $.each(data, function(key, val) {
                            $("#sportsTypeBranch").append('<option value='+val.eventId+'>'+val.eventName+'</option>');
                            form.render('select');
                        });
                    }
                }
            });
    });

     // 选择分项时
    form.on('select(sportsTypeBranch)', function(data){
        //小项取消禁选
        $("#sportsTypeSon").removeAttr("disabled");
        form.render('select');

        var eventType = 3; //分项等级
        var parentId = data.value; //得到被选中的值

        $.ajax({
            type: "POST",
            url: '/perInfo/selectEvent?eventType=' + eventType + '&parentId=' + parentId,
            success:function(data){
                //每次请求完将上一次的请求结果清空，否则结果会一直叠加
                $("#sportsTypeSon").empty();
                if(data == ''){
                    $("#sportsTypeSon").append("<option value=''>暂无分项</option>");
                    form.render('select');
                }else{
                    $.each(data, function(key, val) {
                        $("#sportsTypeSon").append('<option value='+val.eventId+'>'+val.eventName+'</option>');
                        form.render('select');
                    });
                }
            }
        });
    });
});

 参考文章：更新渲染部分