目的：实现店铺和仓库的二级关联，通过选择不同的店铺，来显示这个门店对应的库位信息。
1. 在select选项上添加lay-filter选择器。
<div class="layui-inline"> <label class="layui-form-label-sm">店铺</label> <div class="layui-input-inline-sm"> <select name="siteId" id="siteId" lay-filter="site"> <option value="">全部</option> <c:forEach items="${siteList}" var="item" varStatus="status"> <option value="${item.id }">${item.remark}</option> </c:forEach> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label-sm">库位</label> <div class="layui-input-inline-sm"> <select name="repositoryId" id="repositoryId" lay-filter="repository"> </select> </div> </div>
2. 添加事件监听器，监听店铺选择事件
1）form.on实现监听
2) select(site) 选择监听site这个filter
3) data.value即选择的值
4）ajax查询后台获取id为data.value的对应的仓库集合
5）遍历json，拼接 option选择项。
6）$(‘#repositoryId‘).append(repositoryHtml); // 将拼接结果加入到仓库的选项中
7）renderForm(); //重新渲染form
//监听select form.on(‘select(site)‘,function (data) { $.ajax({ type: ‘get‘ ,url: ctx+‘/repository/getComboxList‘ ,data:{‘siteId‘:data.value} ,success:function(res){ var repositoryHtml = ‘‘; var resJson = $.parseJSON(res); for(i in resJson){ repositoryHtml += ‘<option value="‘+resJson[i].id + ‘">‘ + resJson[i].locName + ‘</option>‘; } $(‘#repositoryId‘).html(‘‘).append("<option value=\"\">全部</option>"); $(‘#repositoryId‘).append(repositoryHtml); $("#repositoryId").find(‘option:eq(1)‘).attr(‘selected‘, true); renderForm(); //需要重新渲染 } }); })
renderForm()
function renderForm() { layui.use(‘form‘,function () { form.render(‘select‘); }) }
原文：https://www.cnblogs.com/30go/p/11827420.html