<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框重新渲染
}
});
}
})
这个问题其实也不难 但是时间稍微长一点就不太记得 所以记录一下 方便以后查阅