- 模拟数据
数据多了点,只展示这么点
结构
- html代码
<input id="city1" />
<input id="city2" />
<input id="city3" />
- jquery和easyui代码
// 这个是城市管理 ,传入三个input框id参数,分别对应一级类别,二级类别,三级类别,如果还有第四个id参数,则代表这个id是默认选中的第三级类别(可以为null)
linkageCity = function(oneId,twoId,threeId,fourId){
// 查询fourId是否是第三级类别
var subclass ;
$.ajax({
// sql语句:SELECT b.* FROM tb_classify_city as a LEFT JOIN tb_classify_city as b on a.superclass_number = b.id_city and b.superclass_number != 0 where a.id_city = #{0}
url:'/category/position/linkageCity/'+fourId, // 这个路径是向后台传递第三级类别的id(只有传第三级类别才会返回数据)然后返回他的上一级数据
type:'GEt',
dataType:'json',
async:false, // 同步
success : function(result){
subclass = result;
}
})
var topPath = '/category/position/listCity/0'; // 这个路径是返回所有的父类id为0的数据
var type = 'GET'; // 请求方式
var filed = 'idCity'; // 基础数据值名称绑定到该下拉列表框。
var name = 'cityName'; // 基础数据字段名称绑定到该下拉列表框。 也就是实体类中的id和name
var twoPath = '/category/position/listCity/'; // 这个路径是传一个父类id过去,返回该父类id下的所有子类数据
// 判断fourId是否是第三级的类别
subclass[0]!=null ? threeLinkage(oneId,twoId,threeId,fourId,0,topPath,type,filed,name,twoPath,subclass[0].superclassNumber,subclass[0].idCity) : threeLinkage(oneId,twoId,threeId,fourId,-1,topPath,type,filed,name,twoPath);
}
// 城市管理的三级联动的封装方法
function threeLinkage(oneId,twoId,threeId,fourId,identifying,topPath,type,filed,name,twoPath,superNumber,subclassFiled){
// 不能手动输入
$('#'+twoId).attr("editable",'false');
$('#'+threeId).attr("editable",'false');
//开启下拉框
$('#'+twoId).combobox({ });
$('#'+threeId).combobox({ });
$('#'+oneId).combobox({
url:topPath,
method:type,
valueField:filed,
textField:name ,
onLoadSuccess:function(){
if(identifying==0){
$('#'+oneId).combobox('select',superNumber);
identifying++;
}else{
$('#'+oneId).combobox('select','请选择');
$('#'+twoId).combobox('select','请先选择一级类别');
$('#'+twoId).combobox('disable');
$('#'+threeId).combobox('select','请先选择二级类别');
$('#'+threeId).combobox('disable');
}
},
onSelect:function(record){
if(record!=undefined){
$('#'+twoId).combobox({
url:twoPath+record[filed],
valueField:filed,
textField:name ,
method:type,
onLoadSuccess:function(){
if(identifying==1){
$('#'+twoId).combobox('select',subclassFiled);
}else{
$('#'+twoId).combobox('select','请选择');
$('#'+threeId).combobox('select','请先选择二级类别');
$('#'+threeId).combobox('disable');
}
},
onSelect:function(record){
if(record!=undefined){
$('#'+threeId).combobox({
url:twoPath+record[filed],
valueField:filed,
textField:name ,
method:type,
onLoadSuccess:function(){
if(identifying==1){
$('#'+threeId).combobox('select',fourId);
identifying++;
}else{
$('#'+threeId).combobox('select','请选择');
}
}
})
}
}
})
}
}
})
}
然后调一次方法就搞定:
$(function () {
linkageCity("city1","city2","city3");
})
效果图: