layui的select联动

要实现联动效果需要注意两点：

1：监听到select的change事件；

2：异步加载的内容(Ajax默认为异步)，需要重新渲染后才可以 正常使用。

案例（这个案例是一个服务下有相应的项目）
首先是jsp/html页面：

 <div class="layui-form-item">
            <label class="layui-form-label">所属服务:</label>
            <div class="layui-input-block">
                <select name="serviceId" lay-verify="required" id="iserviceId" lay-filter="brickType">
                    <option value="">--请选择--</option>
                   <#list serviceList as s >
                    <option value='${s.serviceId}'>${s.serviceName}</option>
                   </#list>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属项目:</label>
            <div class="layui-input-block">
                <select name="itemId" lay-verify="required" id="iitemId">
                    <option value="">==请选择==</option>
                </select>
            </div>
        </div>

一定不要忘记加lay-filter属性，没有它就实现不了该功能。

js代码：

 layui.use(['form'], function() {
        var form=layui.form;
        //事件监听
        form.on('select(brickType)', function(data){
            var val=data.value;
            $.ajax({
                url:"${base}/serviceSubitem/getItemOpen",
                dataType : 'json',
                data:{"serviceId":val},
                success : function(data) {
                    $("#iitemId").html("<option value=''>==请选择==</option>"); //清空下拉框
                    $(data).each(function() { //遍历
                        $("<option value='" + this.itemId + "'>"+ this.itemName + "</option>").appendTo("#iitemId");
                        form.render('select');//form.render('select');重新渲染一次，就可以正常使用
                    });
                    $("#iitemId").get(0).selectedIndex=0;
                }
            });
        });
    });

注：数据异步加载到select的option中之后，点击该select会发现layui的选中效果不起作用（就是这里让我找了好久），需要使用form.render(‘select’);重新渲染一次，就可以正常使用。

以上操作做完就可以使用了！