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