1. 程式人生 > >easyui下拉框實現二級聯動

easyui下拉框實現二級聯動

原理:第一陣列正常展示,根據選中的選項將選項下的陣列賦給下一複選框

                    theGetData = data["linkage"];//ajax請求回來的
                    $.each(theGetData,function(i,v){//將資料轉為所需格式
                        //如果改路線 有地鐵站註冊
                        if(v.line_station.length>0){
                            lineArr.push({"id":v["line_id"],"text":v["line_name"]});
                        }
                    });
                    /*建立下拉框*/
                  //地鐵線 二級聯動
                    window.parent.saveCombobox({
                        id:"#dwcglzldhLine",
                        pageId:iframeId,
                        data:lineArr,
                        first:lineArr[0].id,
                        required:true,
                        editable:false,
                        select:function(record){
                            //每次選中後先 清空 thisAddress的值 
                            thisAddress = [];
                            $.each(theGetData,function(i,v){
                                if(v.line_id==record.id&&v.line_station.length>0){//點選的對應的資料項
                                    $.each(v.line_station,function(index,val){
                                        if(val.customer_id){
                                            thisAddress.push({
                                                "id":val.station_id,
                                                "text":val.station_name
                                            });
                                        }
                                    });
                                }
                            });
                            //地鐵站
                            window.parent.saveCombobox({
                                id:"#dwcglzldhAddressFrom",
                                pageId:iframeId,
                                data:thisAddress,
                                first:thisAddress[0]["id"],
                                required:true,
                                editable:false,
                                select:function(resData1){
                                	var id;
                                	theToStationArr = [];
                                	$.each(thisAddress,function(index,val){
                                		if(resData1.id==val.id) return true;
                                		theToStationArr.push(val);
                                	});
                                	stationOneType = resData1.id;
	                                //地鐵站
	                                window.parent.saveCombobox({
	                                    id:"#dwcglzldhAddressTo",
	                                    pageId:iframeId,
	                                    data:theToStationArr,
	                                    first:theToStationArr[0]["id"],
	                                    required:true,
	                                    editable:false,
	                                    select:function(resData2){
	                                    	stationTwoType = resData2.id;
	                                    }
	                                });
	                              
                                	//$("#jnyhnxAddress",window.parent.document).combobox("getValue");
                                },
                                func:function(){
                                	getData();
                                }
                            });
                        }
                       
                    });
法二:
   var thegetdata = data["linkage"];
   var newdata=[];
   $.each(thegetdata,function(i,v){//將資料轉為所需格式
	   newdata.push({"id":v.line_id,"name":v.name});
   });
   window.parent.saveCombobox({//第一複選框正常使用
	   id:"#id",
	   pageId:iframeId,
	   data:newdata,
	   first:newdata[0]["id"],
	   required:true,
	   editable:false,
	   select:function(record){//將選擇的選項對應的陣列抽選出來,並轉換為所需格式
		    newdata2 = [];
			 newdata3 = [];
		   $.each(newdata,finction(i,v){
			   if(record.id==newdata[i].id){
				   newdata2 = newdata[i].line_station;
				   $.each(newdata2,function(i2,v2){
					   newdata3.push(
						{"id":v2.id,"name":v2.name}
					   )
				   })
			   }
		   })
		   window.parent.saveCombobox({//第二複選框呼叫
                                id:"#dwcglzldhAddressFrom",
                                pageId:iframeId,
                                data:newdata3,
                                first:newdata3[0]["id"],
                                required:true,
                                editable:false,
                                func:function(){
                                	getData();
                                }
                            });
	   }
   })