博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
省市区县三级联动JAVA+MySQL+JQuery
阅读量:5820 次
发布时间:2019-06-18

本文共 4483 字,大约阅读时间需要 14 分钟。

场景介绍:

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

大体思路如下:

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

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

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

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

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

        JSP表单代码:

[html]
  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" οnchange="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部分代码:

[javascript]
  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部分查询代码:

[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.   
  11. @ResponseBody  
  12. @RequestMapping(value="findModel")  
  13. public List<TCdCarModel> findModel(TCdCarModel tCdCarModel, HttpServletRequest request,  
  14.         HttpServletResponse response, Model model) {  
  15.     // SQL中只用到了ajax中data的brandId和branchId  
  16.     // brandId和branchId与tCdCarModel里的brandId和branchId字段分别对应  
  17.     List<TCdCarModel> tCdCarModelList = tCdCarModelService.findList(tCdCarModel);  
  18.     model.addAttribute("tCdCarModelList", tCdCarModelList);  
  19.    return tCdCarModelList;  
  20. }  

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

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

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

 

转载地址:http://tlwdx.baihongyu.com/

你可能感兴趣的文章
路由器发布服务器
查看>>
实现跨交换机VLAN间的通信
查看>>
jquery中的data-icon和data-role
查看>>
python例子
查看>>
环境变量(总结)
查看>>
ios之UILabel
查看>>
Java基础之String,StringBuilder,StringBuffer
查看>>
1月9日学习内容整理:爬虫基本原理
查看>>
安卓中数据库的搭建与使用
查看>>
AT3908 Two Integers
查看>>
渐变色文字
查看>>
C++ 0X 新特性实例(比较常用的) (转)
查看>>
node生成自定义命令(yargs/commander)
查看>>
各种非算法模板
查看>>
node-express项目的搭建并通过mongoose操作MongoDB实现增删改查分页排序(四)
查看>>
PIE.NET-SDK插件式二次开发文档
查看>>
如何创建Servlet
查看>>
.NET 设计规范--.NET约定、惯用法与模式-2.框架设计基础
查看>>
win7 64位+Oracle 11g 64位下使用 PL/SQL Developer 的解决办法
查看>>
BZOJ1997:[HNOI2010]PLANAR——题解
查看>>