EasyUI学习之Combobox级联下拉列表(2)

本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码，供大家参考，具体内容如下

1. html代码

<fieldset>
  <legend>信息查询</legend>
  <div style="white-space: nowrap; padding: 5px;">
    <label>学校：</label>
    <input class="easyui-combobox" type="text" id="School" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>院系：</label>
    <input class="easyui-combobox" type="text" id="Faulty" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>专业：</label>
    <input class="easyui-combobox" type="text" id="Major" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>班级：</label>
    <input class="easyui-combobox" type="text" id="Class" />
    &nbsp;&nbsp;&nbsp;&nbsp;      
  </div>
  <div style="white-space: nowrap; padding: 5px;">
    <label>区域：</label>
    <input class="easyui-combobox" type="text" id="Area" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>楼宇：</label>
    <input class="easyui-combobox" type="text" id="Building" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>楼层：</label>
    <input class="easyui-combobox" type="text" id="Floor" />
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>房间：</label>
    <input class="easyui-combobox" type="text" id="Room" />   
  </div>
</fieldset>

2.显示

3.js代码

//获取组织机构数据
function GetDeptTreeData() {
  var queryDataDept = { layer: 3, isUsing: false }; //表示获取层数到院系，不启用的节点不显示
  $.ajax({
    type: 'post',
    url: '/Common/GetDetptTree',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: queryDataDept,
    success: function (treedata) {
      InitDepartment(treedata, 'School', 'Faulty', 'Major', 'Class');
    }
  });

}
//获取建筑机构数据
function GetBuildingTreeData() {
  $.ajax({
    type: 'post',
    url: '/Common/GetTreeData',//指向后台的Action来获取当前用户的信息的Json格式的数据
    dataType: 'json',
    data: { type: 1, layer: 4 },
    success: function (treedata) {
      InitDepartment(treedata, 'Area', 'Building', 'Floor', 'Room');
    }
  });
}
//初始化组织机构下拉列表框
function InitDepartment(treeData, schoolId, facultyId, majorId, classId) {
  //////////////////////////////////////级联下拉列表框//////////////////////////

  var localData = [{ "Id": 0, "Name": "全部" }];
  //学校下拉列表
  var School = $('#' + schoolId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑，只能选择
    onChange: function (school) {
      if (school != 0) {
        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          if (schoolData.id == school) {
            data.push({ 'Id': 0, 'Name': '全部' });
            $.each(schoolData.children, function (faultyIndex, faultyData) {
              data.push({ 'Id': faultyData.id, 'Name': faultyData.text });
            });
          }
        });
        Faulty.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }

      Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);

    }
  });

  //院系下拉列表
  var Faulty = $('#' + facultyId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: true,
    editable: false,//不可编辑，只能选择
    onChange: function (faculty) {

      if (faculty != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            if (faultyData.id == faculty) {
              data.push({ 'Id': 0, 'Name': '全部' });
              $.each(faultyData.children, function (majorIndex, majorData) {
                data.push({ 'Id': majorData.id, 'Name': majorData.text });
              });
            }
          });
        });

        Major.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
      Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
    }
  });

  //专业下拉列表
  var Major = $('#' + majorId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑，只能选择
    onChange: function (major) {

      if (major != 0) {

        var data = [];
        $.each(treeData, function (schoolIndex, schoolData) {
          $.each(schoolData.children, function (faultyIndex, faultyData) {
            $.each(faultyData.children, function (majorIndex, majorData) {
              if (majorData.id == major) {
                data.push({ 'Id': 0, 'Name': '全部' });
                $.each(majorData.children, function (classIndex, classData) {
                  data.push({ 'Id': classData.id, 'Name': classData.text });
                });
              }
            });
          });
        });

        Class.combobox("clear").combobox('loadData', data).combobox('select', 0);
      } else {
        Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
      }
    }
  });

  //班级下拉列表
  var Class = $('#' + classId).combobox({
    valueField: 'Id', //值字段
    textField: 'Name', //显示的字段
    panelHeight: 'auto',
    required: false,
    editable: false,//不可编辑，只能选择
  });

  var schoolData = [];//创建学校数组
  schoolData.push({ 'Id': 0, 'Name': '全部' });
  $.each(treeData, function (index, data) {
    schoolData.push({ 'Id': data.id, 'Name': data.text });
  });

  School.combobox("clear").combobox('loadData', schoolData).combobox('select', 0);
  Faulty.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Major.combobox("clear").combobox('loadData', localData).combobox('select', 0);
  Class.combobox("clear").combobox('loadData', localData).combobox('select', 0);
}

//初始化建筑下拉列表框 ---- 已经弃用，使用InitDepartment来处理，不使用树形数据，根据父节点id获取数据
//function InitBuilding(treeData, areaId, buildingId, floorId, roomId) {
//  //////////////////////////////////////级联下拉列表框//////////////////////////

//  var localData = [{ "Id": 0, "Name": "全部" }];
//  //园区下拉列表
//  var Area = $("#" + areaId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    url: '/Building/GetBuildingInfoListJson?parentid=0&type=1',
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Id": 0, "Name": "全部", select: true });//在数组第一项添加数据
//      return data;
//    },
//    onChange: function (area) {
//      if (area != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 2, parentid: area }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Building.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼宇下拉列表
//  var Building = $('#' + buildingId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    onChange: function (building) {

//      if (building != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 3, parentid: building }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Floor.combobox("clear").combobox('loadData', data).combobox('select', 0);
//          Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        }, 'json');
//      } else {
//        Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //楼层下拉列表
//  var Floor = $('#' + floorId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    onChange: function (floor) {

//      if (floor != 0) {
//        $.get('/Building/GetBuildingInfoListJson', { type: 4, parentid: floor }, function (data) {
//          data.unshift({ "Id": 0, "Name": "全部" });//在数组第一项添加数据
//          Room.combobox("clear").combobox('loadData', data).combobox('select', 0);
//        }, 'json');
//      } else {
//        Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//      }
//    }
//  });

//  //房间下拉列表
//  var Room = $('#' + roomId).combobox({
//    valueField: 'Id', //值字段
//    textField: 'Name', //显示的字段
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//  });

//  Building.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Floor.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//  Room.combobox("clear").combobox('loadData', localData).combobox('select', 0);
//}

//初始化其他下拉列表
//function BindDictItem(comboid, catlog) {
//  $('#' + comboid).combobox({
//    valueField: 'Value',
//    textField: 'Name',
//    url: '/Dictionary/GetComboBoxValue?name=' + catlog,
//    panelHeight: 'auto',
//    required: false,
//    editable: false,//不可编辑，只能选择
//    loadFilter: function (data) {
//      data.unshift({ "Value": '0', "Name": "全部" });//在数组第一项添加数据
//      return data;
//    },
//  });
//}

4.Json数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# EasyUI  # Combobox级联下拉列表  # Combobox下拉列表  # Combobox级联下拉  # jQuery EasyUI中DataGird动态生成列的方法  # EasyUI学习之Combobox下拉列表(1)  # EasyUI 数据表格datagrid列自适应内容宽度的实现  # Easyui Datagrid自定义按钮列(最后面的操作列)  # easyUI下拉列表点击事件使用方法  # easyui combogrid实现本地模糊搜索过滤多列  # EasyUI使用DataGrid实现动态列数据绑定  # jquery easyui如何实现格式化列  # jEasyUI 设置冻结列的实现示例  # 第一项  # 院系  # 级联  # 园区  # 大家分享  # 信息查询  # 具体内容  # 大家多多  # 数到  # Room  # Area  # js  # Floor  # Class  # Major  # Faulty  # Building  # amp  # nbsp  # function 

相关文章： 建站主机解析：虚拟主机配置与服务器选择指南  如何高效搭建专业期货交易平台网站？  如何快速生成ASP一键建站模板并优化安全性？  建站之星伪静态规则如何正确配置？  如何做网站制作流程,*游戏网站怎么搭建？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  北京网站制作公司哪家好一点,北京租房网站有哪些？  javascript中对象的定义、使用以及对象和原型链操作小结  测试制作网站有哪些,测试性取向的权威测试或者网站？  建站主机如何选？高性价比方案全解析  如何选择香港主机高效搭建外贸独立站？  如何用腾讯建站主机快速创建免费网站？  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何高效完成独享虚拟主机建站？  简单实现Android验证码  如何在企业微信快速生成手机电脑官网？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  临沂网站制作公司有哪些,临沂第四中学官网？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  建站之星安装模板失败：服务器环境不兼容？  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  已有域名能否直接搭建网站？  建站之星备案流程有哪些注意事项？  在线教育网站制作平台,山西立德教育官网？  建站org新手必看：2024最新搭建流程与模板选择技巧  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  建站之星ASP如何实现CMS高效搭建与安全管理？  昆明网站制作哪家好,昆明公租房申请网上登录入口？  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  如何快速查询网址的建站时间与历史轨迹？  如何通过建站之星自助学习解决操作问题？  如何通过cPanel快速搭建网站？  建站之星如何取消后台验证码生成？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  网站制作公司排行榜,抖音怎样做个人官方网站  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  外汇网站制作流程,如何在工商银行网站上做外汇买卖？  网站制作知乎推荐,想做自己的网站用什么工具比较好？  视频网站制作教程,怎么样制作优酷网的小视频？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  如何通过NAT技术实现内网高效建站？  全景视频制作网站有哪些,全景图怎么做成网页？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  如何快速生成可下载的建站源码工具？