JS实现级联查询

在ITOO中，我们用到了级联查询：根据建筑类型查询建筑，再根据建筑id查询建筑下的所有教室。这个类似于省，市，县的查询。这里说一下具体的方法。//----------加载建筑类型 --王孟梅-------start-2016年8月15日15:19:19-v5.0
$('#buildTypeName').combobox(
{
url : 'queryBuildingType',
editable : false, // 不可编辑状态
cache : false,
panelHeight : '150',// 自动高度适合
valueField : 'buildingTypeId',
textField : 'buildingTypeName',
onLoadSuccess:function(data){
if(data.length==0){
$.messager.alert("系统提示","当前没有可选的建筑类型，请联系管理员！","warning");
} else{
var data1 =$('#buildTypeName').combobox('getData');
if(data1 != null){
//设置默认的建筑类型
$("#buildTypeName").combobox('select',data1[0].buildingTypeId);

$.get('queryBuildByType',{
"buildingTypeId":data1[0].buildingTypeId},function(result){
if(result.length==0){
$.messager.alert("系统提示", "当前没有可选的教学楼信息，请联系管理员！", "warning");
}else{
buildId=result[0].buildId;
$("buildName").combobox("loadData",result);
$("buildName").combobox("select",result[0].buildId);
}

$.get('queryRoomByBuildId',{
"buildId" :buildId},function(roomdata){
if(roomdata.length==0){
$.messager.alert("系统提示", "当前没有可选的教室信息，请联系管理员！", "warning");
}else{
roomId=roomdata[0].roomId;
$("#roomName").combobox("loadData", roomdata);
$("#roomName").combobox("select", roomdata[0].roomId);
}
})

});

}

}
},

//点击建筑类型时
onSelect:function(data){
$("#buildName").combobox('clear');// 清空建筑
$("#roomName").combobox('clear');// 清空教室
var buildTypeId = data.buildingTypeId;
$.ajax({
type:"POST",
url:'queryBuildByType?buildingTypeId=' +buildTypeId,
cache:false,
dataType:"json",
success:function(buliddata){
if(buliddata !=null){
$("#buildName").combobox("loadData",buliddata);
$("#buildName").combobox("select",buliddata[0].buildId);
}else{
$("#buildName").combobox("loadData", '');
$("#roomName").combobox("loadData", '');
$.messager.alert('系统提示','没有查询到教学楼信息！');
}
}

})

}
});
//----------加载建筑类型 --王孟梅-------end-2016年8月15日15:19:19-v5.0

//----------加载建筑名称 --王孟梅-------start-2016年8月15日15:19:19-v5.0
$('#buildName').combobox(
{
valueField : 'buildId',
textField : 'buildName',

onSelect:function(data){
$("#roomName").combobox("setValue", '');// 清空教室

//获取教室id
var buildId1 = data.buildId;
$.ajax({
type:"POST",
url:'queryRoomByBuildId?buildId='+buildId1,
cache:false,
dataType:"json",
success:function(data){
if(data!=null){
$("#roomName").combobox("loadData", data);
$("#roomName").combobox("select",data[0].roomId);
}else{
$("#roomName").combobox("loadData", '');
$.messager.alert('系统提示','没有查询到教室信息！');
}
}
});
}
});
$('#roomName').combobox({
valueField : 'roomId',
textField : 'roomName',

});
//----------加载名称类型 --王孟梅-------end-2016年8月15日15:19:19-v5.0

  细细看起来，代码还是非常简单的。后台方法就不罗列了。
  发现前台也很简单，只不过我们的代码量还是不够多，所以遇到问题难免会不知所措。所以，大家多多经历，多多积累吧！