layui中select实现二级关联

目的：实现店铺和仓库的二级关联，通过选择不同的店铺，来显示这个门店对应的库位信息。

 

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');
    })
}