省市县三级异步加载导航

标签：lse   min   格式   根据   class   初始   ring   创建   hat   

省市县三级联动（动态）：
逻辑：请求后台数据 一级菜单（省），创建html，赋值，添加，每个菜单绑定点击事件，根据与2级菜单的关系数据请求数据，加载2级菜单（市），同理获取三级菜单（县、区）
//点击加载省
function province() {
var proHtml = ‘‘, that = this;
getData(gg.core.url.rootPath+"/ta/admin/areanum/list/", 0, function (data) {
for (var i = 0; i < data.length; i++) {
proHtml += ‘<option value="‘ + data[i].zipCode +‘.‘+data[i].name+‘">‘ + data[i].name + ‘</option>‘;
}
//初始化省数据
$("select[name=province]").append(proHtml);
form.render();
form.on(‘select(province)‘, function (proData) {
$("select[name=area]").html(‘<option value="">请选择县/区</option>‘);
//获取联动参数：zipCode以及省份值
var zipCode = parseInt(proData.value.split(‘.‘)[0]);
if (zipCode > 0) {
getData(gg.core.url.rootPath+"/ta/admin/areanum/list/", zipCode, city);

} else {
$("select[name=city]").attr("disabled", "disabled");
}
});
})
}
//市加载
function city(city) {
var cityHtml = ‘<option value="">请选择市</option>‘, that = this;
for (var i = 0; i < city.length; i++) {
cityHtml += ‘<option value="‘ + city[i].zipCode + ‘.‘+city[i].name+‘">‘ + city[i].name + ‘</option>‘;
}
$("select[name=city]").html(cityHtml).removeAttr("disabled");
form.render();
form.on(‘select(city)‘, function (cityData) {
var zipCode = parseInt(cityData.value.split(‘.‘)[0]);
if (zipCode > 0) {
getData(gg.core.url.rootPath+"/ta/admin/areanum/list/", zipCode, area);
} else {
$("select[name=area]").attr("disabled", "disabled");
}
});
}
//县/区加载
function area(area) {
var areaHtml = ‘<option value="">请选择县/区</option>‘, that = this;
for (var i = 0; i < area.length; i++) {
areaHtml += ‘<option value="‘ + area[i].zipCode + ‘.‘+area[i].name+‘">‘ + area[i].name + ‘</option>‘;
}
$("select[name=area]").html(areaHtml).removeAttr("disabled");
form.render();
form.on(‘select(area)‘, function (ar) {
//console.log(ar);
var zipCode = parseInt(ar.value.split(‘.‘)[0]);
console.log(zipCode);
if (zipCode > 0) {
placeId(zipCode)
} else {
$("select[name=placeId]").attr("disabled", "disabled");
}
});
}

 后台数据格式："data": { "id": 1, "name": "北京市", "preCode": "0", "zipCode": "11" },

省市县三级异步加载导航

标签：lse   min   格式   根据   class   初始   ring   创建   hat   

原文地址：https://www.cnblogs.com/tuhazi/p/9777217.html