我是靠谱客的博主 发嗲毛豆,最近开发中收集的这篇文章主要介绍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();
}
});
}
})


最后

以上就是发嗲毛豆为你收集整理的easyui下拉框实现二级联动的全部内容,希望文章能够帮你解决easyui下拉框实现二级联动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(41)

评论列表共有 0 条评论

立即
投稿
返回
顶部