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

场景介绍：

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

大体思路如下：

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

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

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

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

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

JSP表单代码：

1. <div class="control-group" style="margin-top:12px;">
2. <label class="controls-label">品牌名称：</label>
3. <form:select id="operTypeSelect" path="bannerId" class="input-medium" onchange="getBranchByBrandName()">
4. <form:option selected="selected" value="">请选择</form:option>
5. <c:forEach items="${tCdCarBrandList}" var="item" varStatus="status">
6. <form:option value="${item.id }">${item.brandName }</form:option>
7. </c:forEach>
8. </form:select>
9. <label class="controls-label">车系名称：</label>
10. <select id="operSelect" name="branchId" class="input-medium" onClick="getModelByBranchName()">
11. <option selected="selected" value="">请选择</option>
12. <c:forEach items="${tCdCarBranchList}" var="item" varStatus="status">
13. </c:forEach>
14. </select>
15. <label class="controls-label">车型名称：</label>
16. <select id="modelsId" name="modelId" class="input-medium" style="width:400px;">
17. <option selected="selected" value="">请选择</option>
18. <c:forEach items="${tCdCarModelList}" var="item" varStatus="status">
19. </c:forEach>
20. </select>
21. </div>

JS部分代码：

1. function getBranchByBrandName() {
2. var operTypeSelect = document.getElementById("operTypeSelect");
3. var operTypeValue = operTypeSelect.value;
4. var brandId = operTypeValue;
5. $("#brandId").val(brandId);
6. $("#modelsId").empty();
7. $.ajax({
8. mode:"abort",
9. contentType:"application/x-www-form-urlencoded;charset=UTF-8",
10. data:{"brandId":brandId},
11. type:"POST",
12. url:"<span style="font-family: Arial, Helvetica, sans-serif;">你的后台方法访问路径</span>",
13. cache:false,
14. async:false,
15. processData:true,
16. dataType:"json",
17. success:function(tCdCarBrandList) {
18. if (tCdCarBrandList != null && tCdCarBrandList.length > 0) {
19. var str = "<option value=''> " + "请选择" + "</option>;";
20. $.each(tCdCarBrandList, function(i, item) {
21. if (item != "") {
22. str = str + "<option value="+item.id+"> " + item.branchName + "</option>;";
23. $("#operSelect").html(str);
24. } else {
25. $("#operSelect").html("<option id = oper value=''>请选择</option>");
26. }
27. });
28. } else {
29. $("#operSelect").html("<option id = oper>请选择</option>");
30. }
31. <span style="rgb(255, 0, 0);">$("#operSelect").select();</span>
32. $("#modelsId").html("<option value=''>请选择</option>");
33. <span style="background-color: rgb(255, 0, 0);">$("#modelsId").select();</span>
34. }
35. });
36. }
37. function getModelByBranchName() {
38. var brandId = $("#operTypeSelect").val();
39. var branchId = $("#operSelect").val();
40. $("#bannerId").val(branchId);
41. $.ajax({
42. mode:"abort",
43. contentType:"application/x-www-form-urlencoded;charset=UTF-8",
44. data:{"brandId":brandId,"branchId":branchId},
45. type:"POST",
46. url:"你的后台方法访问路径",
47. cache:false,
48. async:true,
49. processData:true,
50. dataType:"json",
51. success:function(tCdCarModelList) {
52. if (tCdCarModelList != null && tCdCarModelList.length > 0) {
53. var str = "<option value=''> " + "请选择" + "</option>;";
54. $.each(tCdCarModelList, function(i, item) {
55. if (item != "") {
56. str = str + "<option value="+item.id+"> " + item.modelName + "</option>;";
57. $("#modelsId").html(str);
58. } else {
59. $("#modelsId").html("<option value=''>请选择</option>");
60. }
61. });
62. } else {
63. $("#operSelect").html("<option value=''>请选择</option>");
64. }
65. <span style="background-color: rgb(255, 0, 0);">$("#modelsId").select();</span>
66. }
67. });
68. }

后台JAVA部分查询代码：

1. @ResponseBody
2. @RequestMapping(value="findBranchByBrandName")
3. public List<TCdCarBranch> findBranchByBrandName(TCdCarBranch tCdCarBranch,
4. HttpServletRequest request, HttpServletResponse response, Model model) {
5. // SQL中只用到了ajax中data的brandId,brandId与tCdCarBranch里的brandId字段对应
6. List<TCdCarBranch> tCdCarBranchList = tCdCarBranchService.findList(tCdCarBranch);
7. model.addAttribute("tCdCarBranchList", tCdCarBranchList);
8. return tCdCarBranchList;
9. }
10. @ResponseBody
11. @RequestMapping(value="findModel")
12. public List<TCdCarModel> findModel(TCdCarModel tCdCarModel, HttpServletRequest request,
13. HttpServletResponse response, Model model) {
14. // SQL中只用到了ajax中data的brandId和branchId
15. // brandId和branchId与tCdCarModel里的brandId和branchId字段分别对应
16. List<TCdCarModel> tCdCarModelList = tCdCarModelService.findList(tCdCarModel);
17. model.addAttribute("tCdCarModelList", tCdCarModelList);
18. return tCdCarModelList;
19. }

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

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

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