easyui 创建三级联动

- 模拟数据
数据多了点，只展示这么点

结构

• html代码

<input id="city1" />
<input id="city2" />
<input id="city3" />

• jquery和easyui代码

	
// 这个是城市管理 ，传入三个input框id参数，分别对应一级类别，二级类别，三级类别，如果还有第四个id参数，则代表这个id是默认选中的第三级类别(可以为null)	
	linkageCity = function(oneId,twoId,threeId,fourId){
	// 查询fourId是否是第三级类别
		var subclass ;
		$.ajax({
		// sql语句：SELECT b.* FROM tb_classify_city as a LEFT JOIN tb_classify_city as b on a.superclass_number = b.id_city and b.superclass_number != 0 where a.id_city = #{0}
			url:'/category/position/linkageCity/'+fourId,			// 这个路径是向后台传递第三级类别的id(只有传第三级类别才会返回数据)然后返回他的上一级数据
			type:'GEt', 
			dataType:'json',
			async:false,											// 同步
			success	: function(result){
				subclass = result;
			}
		})
	
			var topPath = '/category/position/listCity/0';			// 这个路径是返回所有的父类id为0的数据	
			var type = 'GET';										// 请求方式
			var filed = 'idCity';									// 基础数据值名称绑定到该下拉列表框。
			var name = 'cityName';									// 基础数据字段名称绑定到该下拉列表框。 也就是实体类中的id和name
			var twoPath = '/category/position/listCity/';			// 这个路径是传一个父类id过去，返回该父类id下的所有子类数据
	// 判断fourId是否是第三级的类别
		subclass[0]!=null ? threeLinkage(oneId,twoId,threeId,fourId,0,topPath,type,filed,name,twoPath,subclass[0].superclassNumber,subclass[0].idCity) : threeLinkage(oneId,twoId,threeId,fourId,-1,topPath,type,filed,name,twoPath);
	}

// 城市管理的三级联动的封装方法	
	function threeLinkage(oneId,twoId,threeId,fourId,identifying,topPath,type,filed,name,twoPath,superNumber,subclassFiled){
		// 不能手动输入
				$('#'+twoId).attr("editable",'false');
				$('#'+threeId).attr("editable",'false');
		//开启下拉框	
				$('#'+twoId).combobox({ });
				$('#'+threeId).combobox({ });
				
				$('#'+oneId).combobox({    
					url:topPath,    
					method:type,
				    valueField:filed,    
				    textField:name ,
				    onLoadSuccess:function(){
				    	if(identifying==0){
				    		$('#'+oneId).combobox('select',superNumber);
				    		identifying++;
				    	}else{
				    		$('#'+oneId).combobox('select','请选择');
				    		$('#'+twoId).combobox('select','请先选择一级类别');
				    		$('#'+twoId).combobox('disable');
				    		$('#'+threeId).combobox('select','请先选择二级类别');
				    		$('#'+threeId).combobox('disable');
				    	}
				    },
				    onSelect:function(record){
				    	if(record!=undefined){
				    		$('#'+twoId).combobox({ 
				    			url:twoPath+record[filed],    
			    			    valueField:filed,    
			    			    textField:name ,
			    			    method:type,
							    onLoadSuccess:function(){
							    	if(identifying==1){
							    		$('#'+twoId).combobox('select',subclassFiled);
							    	}else{
							    		$('#'+twoId).combobox('select','请选择');
							    		$('#'+threeId).combobox('select','请先选择二级类别');
							    		$('#'+threeId).combobox('disable');
							    	}
							    },
							    onSelect:function(record){
							    	if(record!=undefined){
							    		$('#'+threeId).combobox({ 
							    			url:twoPath+record[filed],        
							    			valueField:filed,    
						    			    textField:name ,
						    			    method:type,
										    onLoadSuccess:function(){
										    	if(identifying==1){
										    		$('#'+threeId).combobox('select',fourId);
										    		identifying++;
										    	}else{
										    		$('#'+threeId).combobox('select','请选择');
										    	}
										    }
								    	})
							    	}		    	
							    }
					    	})
				    	}
				    }
				})
			}

然后调一次方法就搞定：

$(function () {
		linkageCity("city1","city2","city3");
})

效果图：

推荐网址：http://www.jeasyui.net/tutorial/