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

  细细看起来，代码还是非常简单的。后台方法就不罗列了。

  发现前台也很简单，只不过我们的代码量还是不够多，所以遇到问题难免会不知所措。所以，大家多多经历，多多积累吧！