easyUI实现下拉框二级联动的详细步骤

级联下拉框在添加操作中的运用

思路：先动态获取分公司列表，存入下拉框；根据分公司下拉框的值动态获取车队列表。

其中，分公司或车队列表的数据格式如下：

//分公司列表数据格式
[{
   "id":"4567894165181",
   "branchName":"分公司一"
},
 {
   "id":"1985623315145",
   "branchName":"分公司二"
 },
 {
   "id":"2012456783926",
   "branchName":"分公司三"
 }]
//车队列表数据格式
[{
   "id":"0715145217781",
   "motorcadeName":"一车队"
},
 {
   "id":"2020070715145",
   "motorcadeName":"二车队"
 },
 {
   "id":"2020077953926",
   "motorcadeName":"三车队"
 }]

JS页面中的实现代码如下：

//级联下拉框
	$('#lineBranchName').combobox({ 
        url:'geBranchList', //HTTP请求资源，得到分公司列表，数据格式为JSON格式
        editable:false, //设置下拉框为不可编辑状态
        cache: false,
        panelHeight: '150',//自适应高度
        valueField:'id',  //赋值给下拉框的Value 
        textField:'branchName',	//赋值给下拉框的Text
        onLoadSuccess:function(){
        	$('#lineBranchName').combobox("setText","-请选择-");	//设置Text的默认值
        },
        onHidePanel: function(){
	      $("#lineMotorcade").combobox("setValue",'');	//清空车队下拉框的数据
	      var id = $('#lineBranchName').combobox('getValue');	//获取当前分公司下拉框的value
	      $.ajax({
	    	  url: 'geMotorcadeList?branchId='+id,	//获取该分公司的车队
	    	  cache: false,
	    	  success: function(data){
	    		  $("#lineMotorcade").combobox("loadData",data);//装载返回的JSON数据
	    		  $("#lineMotorcade").combobox("setValue",data[0].id);//默认选中第一条数据
	          }
	      }); 	
        }
	 });
	 $('#lineMotorcade').combobox({ 
	     editable:false, //不可编辑状态
	     cache: false,
	     panelHeight: '150',//自适应高度
	     valueField:'id',  //赋值给下拉框的Value 
	     textField:'motorcadeName' //赋值给下拉框的Text
	 });

级联下拉框在编辑操作中的运用

思路：①初始化数据

​ 先获取分公司列表，遍历返回的JSON对象，匹配与需要编辑的对象的属性一致的数据，选中；

​ 根据匹配到的分公司ID获取车队列表，遍历，匹配，选中。

​ ②级联操作（与添加操作一致）

​ 修改时，根据分公司ID获取车队列表，装载进车队下拉框。

JS页面中的实现代码如下：

//级联下拉框
	$('#lineBranchName').combobox({ 
        url:'geBranchList', 
        editable:false, 
        cache: false,
        panelHeight: '150',
        valueField:'id',   
        textField:'branchName',
        onLoadSuccess:function(data){
            //遍历JSON对象
        	for(var i=0;i<data.length;i++){
                //bn为编辑对象的属性，获取方式在此不做叙述
        		if(data[i].branchName==bn){
        			$('#lineBranchName').combobox("setValue",data[i].id);//匹配成功后选中
        			//获取对应的车队列表
                    $.ajax({
        		    	  url: 'geMotorcadeList?branchId='+data[i].id,
        		    	  cache: false,
        		    	  success: function(data){
        		    		  $("#lineMotorcade").combobox("loadData",data);
        		    		  //遍历JSON对象，进行匹配
                              for(var j=0;j<data.length;j++){
        		    			  if(data[j].motorcadeName==mn){
        		    				  $("#lineMotorcade").combobox("setValue",data[j].id);
        		    			  }
        		    		  }
        		          }
        		    }); 
        		}
        	}
        },
        //此步骤与添加操作的相同
        onHidePanel: function(){
	      $("#lineMotorcade").combobox("setValue",'');//清空车队下拉框数据
	      var id = $('#lineBranchName').combobox('getValue');	
	      $.ajax({
	    	  url: 'geMotorcadeList?branchId='+id,
	    	  cache: false,
	    	  success: function(data){
	    		  $("#lineMotorcade").combobox("loadData",data);
	    		  $("#lineMotorcade").combobox("setValue",data[0].id);
	          }
	      }); 	
        }
	 });
	 $('#lineMotorcade').combobox({ 
	     editable:false, //不可编辑状态
	     cache: false,
	     panelHeight: '150',//自动高度适合
	     valueField:'id',   
	     textField:'motorcadeName'
	 });

效果图

添加操作：

编辑操作：