mysql三级联动_省市区县三级联动JAVA+MySQL+JQuery

场景介绍：

由于项目要求，需要做一个进件(新增)功能，而该功能里要用到车品牌、车系、车型的联动查询，也就是经典的三级联动。

大体思路如下：

进入页面，会把所有的车品牌(第一级)在后台查询出来，放到缓存，页面在循环遍历，当选中车品牌(第一级)的某一项时，会根据此项异步的调用后台的方法，然后渲染到前台页面的车系(第二级)，当选中车系(第二级)的某一项时，也会根据此项异步的调用后台的方法，然后渲染到前台页面的车型(第三级)。

当重新选择车品牌(第一级)时，会把车系(第二级)和车型(第三级)置为初始值'请选择车系'、'请选择车型'，若车品牌(第一级)不做修改，而只是重新选择车系(第二级)时，则车型(第三级)要置为初始值'请选择车型'。

记录一下其中的难点(我认为的难点)：

当重新选择某一级数据时，要把他的下级以及子级都要置为初始值！经过请教同事和搜索引擎，找到了一个叫select()的插件。

下面就贴出项目中关键代码：

JSP表单代码：

品牌名称：

请选择

${item.brandName }

车系名称：

请选择

车型名称：

请选择

JS部分代码：

function getBranchByBrandName() {

var operTypeSelect = document.getElementById("operTypeSelect");

var operTypeValue = operTypeSelect.value;

var brandId = operTypeValue;

$("#brandId").val(brandId);

$("#modelsId").empty();

$.ajax({

mode:"abort",

contentType:"application/x-www-form-urlencoded;charset=UTF-8",

data:{"brandId":brandId},

type:"POST",

url:"你的后台方法访问路径",

cache:false,

async:false,

processData:true,

dataType:"json",

success:function(tCdCarBrandList) {

if (tCdCarBrandList != null && tCdCarBrandList.length > 0) {

var str = " " + "请选择" + ";";

$.each(tCdCarBrandList, function(i, item) {

if (item != "") {

str = str + " " + item.branchName + ";";

$("#operSelect").html(str);

} else {

$("#operSelect").html("请选择");

}

});

} else {

$("#operSelect").html("请选择");

}

$("#operSelect").select();

$("#modelsId").html("请选择");

$("#modelsId").select();

}

});

}

function getModelByBranchName() {

var brandId = $("#operTypeSelect").val();

var branchId = $("#operSelect").val();

$("#bannerId").val(branchId);

$.ajax({

mode:"abort",

contentType:"application/x-www-form-urlencoded;charset=UTF-8",

data:{"brandId":brandId,"branchId":branchId},

type:"POST",

url:"你的后台方法访问路径",

cache:false,

async:true,

processData:true,

dataType:"json",

success:function(tCdCarModelList) {

if (tCdCarModelList != null && tCdCarModelList.length > 0) {

var str = " " + "请选择" + ";";

$.each(tCdCarModelList, function(i, item) {

if (item != "") {

str = str + " " + item.modelName + ";";

$("#modelsId").html(str);

} else {

$("#modelsId").html("请选择");

}

});

} else {

$("#operSelect").html("请选择");

}

$("#modelsId").select();

}

});

}

后台JAVA部分查询代码：

@ResponseBody

@RequestMapping(value="findBranchByBrandName")

public List findBranchByBrandName(TCdCarBranch tCdCarBranch,

HttpServletRequest request, HttpServletResponse response, Model model) {

// SQL中只用到了ajax中data的brandId,brandId与tCdCarBranch里的brandId字段对应

List tCdCarBranchList = tCdCarBranchService.findList(tCdCarBranch);

model.addAttribute("tCdCarBranchList", tCdCarBranchList);

return tCdCarBranchList;

}

@ResponseBody

@RequestMapping(value="findModel")

public List findModel(TCdCarModel tCdCarModel, HttpServletRequest request,

HttpServletResponse response, Model model) {

// SQL中只用到了ajax中data的brandId和branchId

// brandId和branchId与tCdCarModel里的brandId和branchId字段分别对应

List tCdCarModelList = tCdCarModelService.findList(tCdCarModel);

model.addAttribute("tCdCarModelList", tCdCarModelList);

return tCdCarModelList;

}

其中JS部分代码中背景为红色高亮代码即是可以将其下级以及子级置为初始化的关键代码，当初就是这行代码困扰了很少时间，

JS高亮代码加入之前的演示：

JS高亮代码加入之后的演示：