layui 下拉框动态添加数据（监听下拉框（select）事件）

　　　　　　　　　　<div class="layui-form-item">
                    <label for="L_route" class="layui-form-label">
                        <span class="x-red">*</span>顶级权限</label>
                    <div class="layui-input-inline" >
                        <select lay-filter="spid" name="spid">
                            <option value="">请选顶级权限</option>
                            @foreach( $menu_list as $key => $vo )
                                <option value="{{ $vo['id'] }}" @if( $info['spid'] == $vo['id'] ) selected="selected" @endif>{{ $vo['menu_name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-input-inline" >
                        <select lay-filter="pid" name="pid" id="menu_pid">
                            <option value="">请选二级权限</option>
                            @if( count( $menu_list_pid ) > 0 )
                                @foreach( $menu_list_pid as $key => $vo )
                                    <option value="{{ $vo['id'] }}" @if( $info['pid'] == $vo['id'] ) selected="selected" @endif>{{ $vo['menu_name'] }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>

　　当上面顶级权限列表发生改变时，下面二级权限下拉框的值也跟随这顶级菜单的改变而改变  

　　

　　　　　　　　
　　　　　　　　　　//通过顶级权限select框的 lay-filter 绑定事件 

　　　　　　　　　　form.on('select(spid)',function( data ){
                    var str = '<option value="">请选二级权限</option>';
                    if( data.value ){
                        $.ajax({
                            url: '你的数据接口地址',
                            type:'get',
                            data:{'pid':data.value},  //传第顶级菜单的id
                            dataType : "json",
                            success:function(result){
                                if(result.state == 200 ){  //接口返回数据后进行处理
                                    $.each(result.data,function(index,value){
                                        str += '<option value="'+ value.id +'">'+ value.menu_name+'</option>';
                                    });
　　　　　　　　　　　　　　　　　　　　　　//这里注意一下 不知道是自己看文档不仔细，还是习惯了jequry的用法  要用html()才可以 使用append() 添加动态数据无效
                                    $("#menu_pid").html( str );
                                }　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　　form.render('select');    //重新渲染
　　　　　　　　　　　　　　　　　　　　form.render('select','pid');  //指定select框重新渲染

           　　　　　　　　　　 }
        　　　　　　　　　　});
    　　　　　　　　　　}
　　　　　　　　　　})

　　这个问题其实也不难  但是时间稍微长一点就不太记得  所以记录一下  方便以后查阅