<script>
? ? ? ? layui.use(['form'],function () {
? ? ? ? ? ? var form = layui.form
? ? ? ? ? ? ? ? ,table = layui.table
? ? ? ? ? ? ? ? ,layer = layui.layer
? ? ? ? ? ? ? ? ,$ = layui.jquery
? ? ? ? ? ? ? ? ,dropdown = layui.dropdown;

? ? ? ? ? ? //獲取第一個下拉的參數(shù)
? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? url:'/domitoryAllBuilding',
? ? ? ? ? ? ? ? type:'get',
? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? //alert(JSON.stringify(data)); ?對象轉(zhuǎn)json
? ? ? ? ? ? ? ? ? ? var list = eval(data)//集合轉(zhuǎn)對象
? ? ? ? ? ? ? ? ? ? ? ? ,option = "<option value='樓棟'>請選擇樓棟</option>";
? ? ? ? ? ? ? ? ? ? $.each(list,function (i,o) { ?//ajax的循環(huán)
? ? ? ? ? ? ? ? ? ? ? ? //循環(huán)拼接下拉菜單參數(shù)
? ? ? ? ? ? ? ? ? ? ? ? option += "<option value='"+o.id+"'>"+o.title+"</option>";
? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? //添加到id為dom1的下拉菜單中
? ? ? ? ? ? ? ? ? ? $("#dom1").html(option);
? ? ? ? ? ? ? ? ? ? form.render('select');//必須寫初始化 ?不然不加載

? ? ? ? ? ? ? ? ? ? //監(jiān)聽第一個表單
? ? ? ? ? ? ? ? ? ? form.on('select(city1)',function (obj) {
? ? ? ? ? ? ? ? ? ? ? ? //獲取下拉的值
? ? ? ? ? ? ? ? ? ? ? ? var city1Id = $("[name='city1']").val();

? ? ? ? ? ? ? ? ? ? ? ? //獲取第二個下拉的參數(shù)
? ? ? ? ? ? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? ? ? ? ? ? url:'/studentAllDomitory?id='+city1Id,
? ? ? ? ? ? ? ? ? ? ? ? ? ? type:'get',
? ? ? ? ? ? ? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var list = eval(data) //集合轉(zhuǎn)對象
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,option = "<option value='公寓'>請選擇公寓</option>";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $.each(list,function (i,o) { ? ?//ajax的循環(huán)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? option += "<option value='"+o.id+"'>"+o.title+"</option>";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#dom2").html(option);//添加到id為dom1的下拉菜單中
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? form.render('select');//初始化 ?必須加載

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //第二個表單監(jiān)聽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? form.on('select(city2)',function (obj) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //獲取下拉的值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var city2Id = $("[name='city2']").val();

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(city2Id=='公寓'){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //加載第一個下拉
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? load(city1Id);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //第二個下拉展示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? table.render({
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? elem: '#demo'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,height: 312
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,url: '/domitoryAllStudent?id='+city2Id //數(shù)據(jù)接口
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,toolbar: '#toolbarDemo'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,defaultToolbar: ['filter', 'exports', 'print', {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: '提示',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? layEvent: 'LAYTABLE_TIPS',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: 'layui-icon-tips'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,page: true //開啟分頁
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,limit:2
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,limits:[2,4,6]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,cols: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? [ //表頭
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {field: 'student_ID', title: '學(xué)生Id', width:80, sort: true, fixed: 'left'}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_DomitoryID', title: '樓棟Id',hide:true, width:80,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_Username', title: '學(xué)生賬號', width:100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_Password', title: '密碼', width:80,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_Name', title: '學(xué)生姓名', width: 100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_Class', title: '班級', width: 100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'student_State', title: '狀態(tài)', width: 80,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 220}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? //加載第一個下拉
? ? ? ? ? ? ? ? ? ? ? ? load(city1Id);

? ? ? ? ?

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? }
? ? ? ? ? ? });

? ? ? ? ? ? //第一個下拉展示
? ? ? ? ? ? function load(city1Id) {
? ? ? ? ? ? ? ? table.render({
? ? ? ? ? ? ? ? ? ? ? ? elem: '#demo'
? ? ? ? ? ? ? ? ? ? ? ? ,height: 312
? ? ? ? ? ? ? ? ? ? ? ? ,url: '/domitoryAllDomitory?id='+city1Id //數(shù)據(jù)接口
? ? ? ? ? ? ? ? ? ? ? ? ,toolbar: '#toolbarDemo'
? ? ? ? ? ? ? ? ? ? ? ? ,defaultToolbar: ['filter', 'exports', 'print', {
? ? ? ? ? ? ? ? ? ? ? ? ? ? title: '提示',
? ? ? ? ? ? ? ? ? ? ? ? ? ? layEvent: 'LAYTABLE_TIPS',
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: 'layui-icon-tips'
? ? ? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? ? ? ? ? ,page: true //開啟分頁
? ? ? ? ? ? ? ? ? ? ? ? ,limit:2
? ? ? ? ? ? ? ? ? ? ? ? ,limits:[2,4,6]
? ? ? ? ? ? ? ? ? ? ? ? ,cols: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? [ //表頭
? ? ? ? ? ? ? ? ? ? ? ? ? ? {field: 'domitory_ID', title: '公寓樓層', width:100, sort: true, fixed: 'left'}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'domitory_BuildingID', title: '樓棟Id',hide:true, width:100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'domitory_Name', title: '公寓名稱', width:100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'domitory_Type', title: '公寓類型', width:100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'domitory_Number', title: '公寓總數(shù)', width: 100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ,{field: 'domitory_Tel', title: '公寓電話', width: 100,edit:true}
? ? ? ? ? ? ? ? ? ? ? ? ? ? , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 250}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ?]
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? }

? ? ? ? ? ? //表格頭部監(jiān)聽
? ? ? ? ? ? table.on('toolbar(test)',function (obj) {
? ? ? ? ? ? ? ? var city1Id = $("[name='city1']").val()
? ? ? ? ? ? ? ? ? ? ,city2Id = $("[name='city2']").val();
? ? ? ? ? ? ? ? layEvent = obj.event;//獲取點擊文本的信息

? ? ? ? ? ? ? ? if(layEvent=='add'&&city2Id=="公寓"){
? ? ? ? ? ? ? ? ? ? layer.open({
? ? ? ? ? ? ? ? ? ? ? ? type:2,
? ? ? ? ? ? ? ? ? ? ? ? title:"添加公寓",
? ? ? ? ? ? ? ? ? ? ? ? content:"addDomitory.jsp?hid="+city1Id,
? ? ? ? ? ? ? ? ? ? ? ? area:['500px', '600px'],
? ? ? ? ? ? ? ? ? ? ? ? shade:0.3,
? ? ? ? ? ? ? ? ? ? ? ? end:function () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? location.reload();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? layer.msg('添加學(xué)生');
? ? ? ? ? ? ? ? ? ? //添加宿舍的學(xué)生
? ? ? ? ? ? ? ? }

? ? ? ? ? ? });

? ? ? ? ? ? //表單監(jiān)聽
? ? ? ? ? ? table.on('tool(test)',function (obj) {
? ? ? ? ? ? ? ? var city1Id = $("[name='city1']").val()
? ? ? ? ? ? ? ? ? ? ,city2Id = $("[name='city2']").val();
? ? ? ? ? ? ? ? layEvent = obj.event;//獲取點擊文本的信息
? ? ? ? ? ? ? ? if(layEvent=='edit' && city2Id=='公寓'){
? ? ? ? ? ? ? ? ? ? //修改公寓
? ? ? ? ? ? ? ? ? ? layer.msg("修改公寓");
? ? ? ? ? ? ? ? }else if(layEvent=='del' && city2Id=='公寓'){
? ? ? ? ? ? ? ? ? ? //刪除公寓
? ? ? ? ? ? ? ? ? ? layer.msg("刪除公寓");
? ? ? ? ? ? ? ? }else if(layEvent=='del' && city2Id!='公寓'){
? ? ? ? ? ? ? ? ? ? //刪除學(xué)生信息
? ? ? ? ? ? ? ? ? ? layer.msg("刪除學(xué)生");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? //修改學(xué)生信息
? ? ? ? ? ? ? ? ? ? layer.msg("修改學(xué)生");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });

? ? ? ? });
? ? </script>

總結(jié)

以上是生活随笔為你收集整理的layui二级下拉菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。