您的位置：首页 > 产品设计 > UI/UE

Easy ui combobox 多级联动（四级联动）

2011-07-25 21:41 169 查看

在多级联动的时候需要先初始化combobox组件，数据的加载采用reload放在上一级combobox的onChange中，

不要在onchange中嵌套onchange，否则会导致回调混乱，而单独声明各个对象的触发条件则正常。

下面这段代码是我在一个程序中使用的，用来完成年级、级部、学科、周次的四联动，只有改变前一个项的值后一个值就跟着改变，效果如图

//先初始化对象
$(function(){
$('#grade').combobox({
width: 70,
panelHeight: "auto",
editable: false,
valueField: 'id',
textField: 'text',
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
},
onChange: function () {
//更新下一级列表
$('#branch').combobox('reload', "ad_ReviewModi.aspx?action=GBCList&type=branch&ParentOrgId=" + $(this).combobox("getValue"));

}
});
$('#branch').combobox({
width: 70,
panelHeight: "auto",
editable: false,
valueField: 'id',
textField: 'text',
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
},
onChange: function () {
//更新市列表
$('#course').combobox('reload', "ad_ReviewModi.aspx?action=GBCList&type=course&ParentOrgId=" + $(this).combobox("getValue"));

}
});

$('#course').combobox({
width: 70,
panelHeight: "auto",
editable: false,
valueField: 'id',
textField: 'text'
});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： EasyUi combobox

相关文章推荐

新的分享

章节导航

Easy ui combobox 多级联动 （四级联动）

Easy ui combobox 多级联动（四级联动）