最近开始使用jquery+easyui实现combobox的二级联动,实现的是省市区三级联动,以下所用的方法适用于三级,以及更多级次的联动。下面进入正题。
三级联动主要是选中一级目标之后,加载二级数据。easyui主要使用combobox的onHidePanel属性,当下拉列表隐藏时触发。
下面上代码:
$.ajax({
url:-------",
dataType:"json",
type:"POST",
success:function(data){
$('#provinceId').combobox({
data:data,
editable:false, //不可编辑状态
cache: false,
panelHeight: '150',
valueField:'id',
textField: 'name',
onHidePanel: function(){
$("#cityId").combobox("setValue",'');
$("#countyName").combobox("setValue",'');
var id = $('#provinceId').combobox('getValue');
$.ajax({
type: "POST",
url: 'xxxxxx',
cache: false,
dataType : "json",
data:{provinceId:id},
success: function(data){
$('#cityId').combobox({
data:data,
editable:false, //不可编辑状态
cache: false,
panelHeight: '150',
valueField:'id',
textField: 'name',
onHidePanel: function(){
$("#countyName").combobox("setValue",'');
var id = $('#cityId').combobox('getValue');
$.ajax({
type: "POST",
url: 'xxxxxxxx',
cache: false,
dataType : "json",
data:{cityId:id},
success: function(data){
$("#countyName").combobox("loadData",data);
}
});
}
});
}
});
}
});
}
});
$('#countyName').combobox({
editable:false, //不可编辑状态
cache: false,
panelHeight: '150',//自动高度适合
valueField:'id',
textField:'name'
});
<th>省份:</th>
<td><input id="provinceId" type="text" class="easyui-combobox" /></td>
<th>城市:</th>
<td><input id="cityId" type="text" class="easyui-combobox"/></td>
<th>区县:</th>
<td><input id="countyId" type="text" class="easyui-combobox" /></td>
使用easyUI中有很多不熟悉的地方,多看文档,基本的实现方式在文档中都有,在这里做一个记录,以便于日后的学习和使用。欢迎大家一起交流学习,共同进步!