一般下拉框用于表单中使用，所以我这里把他放在弹出层的表单中：
表结构
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"></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
