<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框重新渲染
}
});
}
})
這個問題其實也不難 但是時間稍微長一點就不太記得 所以記錄一下 方便以后查閱
