一般下拉框用于表单中使用，所以我这里把他放在弹出层的表单中：

表结构

class Select(db.Model):
    __tablename__ = 'select'  # 表名
    select_id=db.Column(db.Integer,primary_key=True,autoincrement=True)
    select_name = db.Column(db.String(200), nullable=False)  # 分类名称、不能为空
    parent_id = db.Column(db.Integer, nullable=False)     # 父级id、不能为空。
    level = db.Column(db.Integer, nullable=False)     # 级别、不能为空

parent_id表示当前数据是parent_id对应数据的下一级分类

前端

用于点击弹出弹出层的按钮

<button class="layui-btn" id="add_btn"><i class="layui-icon">&#xe654;</i>弹出层</button>

弹出层表单代码

<div id="linkageselect" style="display: none;margin-top: 20px;margin-left: 20px">
    <form class="layui-form layui-form-pane" action="select.html" method="post" id="select_form">
        <div id="select_div">
        </div>
        <div>
            <div class="layui-input-block" style="text-align:right;margin-right:20px;margin-top:10px">
                <button lay-submit lay-filter="form_select" type="button" class="layui-btn" id="commit">提交</button>
            </div>
        </div>
    </form>
</div>

这里把联动select的div空着，只留下拉框的div容器

点击按钮弹出弹出层js

layui.use(['layer','form'], function(){
    var $=layui.jquery,layer=layui.layer,form=layui.form;
    $('#add_btn').click( function(){
        var index = layer.open({
            type:1,
            title:'无限级联动下拉框',
            area:['480px','80%'],
            shade:0.4,
            content:$('#linkageselect')
        })
    })
})

联动下拉框的思路是：根据所选中的不同选项，去显示不同的下一级下拉框，这里写一个获取下一级下拉框的方法，参数就是当前所选中的分类的id

function get_select(cur_id){ //获取某级分类的数据
    layui.$.ajax({
        url:'/get_select/',
        data:{cur_id:cur_id},
        type:'get',
        async:false,  //同步请求
        success: function(resut){
            res = resut;
        }
    })
    console.log('下一级分类的数据：',res);
    return res
}

弹出弹窗成功之后，需要加载一级分类并添加到表单中:

layui.use(['layer','form'], function(){
    var $=layui.jquery,layer=layui.layer,form=layui.form;
    $('#add_btn').click( function(){
        var index = layer.open({
            type:1,
            title:'无限级联动下拉框',
            area:['480px','80%'],
            shade:0.4,
            content:$('#linkageselect'),
            success:function (layero) {
                 layero.find('.layui-layer-content').css('overflow', 'visible');
                 // 处理一级分类
                 $('#select_div').html('')  # 初始化
                 $("#select_div").append(get_select(0).html);
                 form.render('select') 
            }
        })
    })
})

1）layero.find('.layui-layer-content').css('overflow', 'visible') 是为了解决下拉框数据太多会被弹窗遮挡的问题
2）初始化步骤 $('#select_div').html('') 是为了解决重复打开弹出层重复append下拉框的问题
3）append下拉框后需要重新渲染否则不会生效，所以需要form.render('select')

接口

@app.route('/select/')
def select():
    return render_template('select.html')

@app.route('/get_select/',methods=['get'])
def get_select():
    cur_id = request.values.get('cur_id')  # slect选中选项的id

    select = db.session.query(Select.select_id, Select.select_name, Select.level).filter(Select.parent_id==cur_id).all()  # 选中值的下一级分类数据
    datas = []  # 下一级分类的数据
    for (select_id,select_name,level) in select:
        step = {"select_id":int(select_id),"select_name":select_name,"level":level}
        datas.append(step)
    print("datas:",datas)

    if cur_id=='0':
        cur_level = 1
    else:
        cur_level = db.session.query(Select.level).filter(Select.select_id == cur_id).all()
        cur_level = cur_level[0][0]  # 当前操作节点的level

    html = ''  # 返给前端要添加的下一级节点select
    options = ''
    if len(datas) > 0:
        next_level = datas[0]['level']
        for i in datas:
            option = '<option value={select_id}>{select_name}</option>'.format(select_id=i['select_id'],select_name=i['select_name'])
            options = options+option
        html = '<div class="layui-form-item" name="select_{level}">\n ' \
               '    <label class="layui-form-label">分类{level}</label>\n' \
               '    <div class="layui-input-block">\n' \
               '        <select name="cat_{level}" id="cat_{level}" lay-verify="required" lay-filter="*">\n' \
               '            <option value="">请选择</option>\n' \
               '            {options}\n' \
               '        </select>\n' \
               '    </div>\n' \
               '</div>'.format(level=next_level,options=options)
    print('datas', datas, 'html', html, 'cur_level', cur_level)
    return jsonify({'code': 0, 'datas': datas, 'html': html, 'cur_level': cur_level})

因为需要监听下拉框，但是我们是无限级分类，不能每一个select都去写一次监听，所以lay-filter不给具体的值，直接监听所有下拉框

监听select

form.on('select()',function (data) {
    console.log('选中的值:',data.value);
    if(data.value!==''){  //选中的选项不是“请选择”
        res = get_select(data.value)
        datas = res.datas
        html = res.html
        cur_level=res.cur_level;

        $("div[name^='select_']").each(function (index,obj) { //移除当前节点下其它节点下拉框
            if(Number($(obj).attr('name').slice(7))>cur_level){obj.remove();}
        })

        if (res.length !==0){
            console.log('当前节点有子节点')
            $('#select_div').append(html)
            form.render('select')
        }else {
            console.log('当前节点没有子节点数据')
        }
    }else {  // 选中了“请选择”
        cur_level=data.elem.id.slice(4); //切片获取下拉框id（cat_3）的数字
        $("div[name^='select_']").each(function (index,obj) {
            if(Number($(obj).attr('name').slice(7))>cur_level){obj.remove();}
        });
        return false;
    }
})

如果选中了“请选择”，那么要清除该select下面的所有select
如果选中的选项没有下一级分类数据，那么也要清除该select下面的所有select
如果选中的选项有下一级分类数据，那么也要清除该select下面的所有select