场景介绍:

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

大体思路如下:

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

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

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

当重新选择某一级数据时,要把他的下级以及子级都要置为初始值!经过请教同事和搜索引擎,找到了一个叫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高亮代码加入之后的演示:

省市区县三级联动JAVA+MySQL+JQuery的更多相关文章

  1. easyui commobox省市区县三级联动

    1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...

  2. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  3. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  4. ajax省市线三级联动

    <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ve ...

  5. 省份、城市、区县三级联动Html代码

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  6. echarts 中国地图实现 省、市、区县三级联动,省级下钻、市级下钻

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 效果如下图: 每天学习一点点 编程PDF电子书.视频教程免费下载:http://www ...

  7. Pyqt QComboBox 省市区县联动效果

    在Qt中, QComboBox方法窗口组件允许用户从列表清单中选择,在web中就是select标签,下拉选项. 省市区县的联动就是currentIndexChanged 获取当前的Index,通过这个 ...

  8. 循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用

    在很多应用中,往往都涉及到记录用户所在省份.城市.区县或者街道等信息,一般我们可以通过联动的Select或者类似的界面组件进行展示,或者使用Element中的el-cascader界面组件进行展示,而 ...

  9. Webform——中国省市三级联动以及IsPostBack

    首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...

随机推荐

  1. 轻松学习LINUX系列教程推出

    本系列多媒体教程已完成的博文: 1.轻松学习Linux之入门篇 http://chenguang.blog.51cto.com/350944/449214 2.轻松学习Linux之本地安装系统 (分区 ...

  2. nginx实现正向代理和反向代理

    注意:nginx正向代理有缺陷,如果同时实现http和https正向代理请使用squid软件 (1)正反向代理 正向代理:实现客户端上网 反向代理:代理访问后端web服务器, 区别:正向代理的对象是客 ...

  3. Python BeautifulSoup 简单笔记

    Beautiful Soup 是用 Python 写的一个 HTML/XML 的解析器,它可以很好的处理不规范标记并生成剖析树.通常用来分析爬虫抓取的web文档.对于 不规则的 Html文档,也有很多 ...

  4. POJ 1655.Balancing Act-树的重心(DFS) 模板(vector存图)

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17497   Accepted: 7398 De ...

  5. 141. Linked List Cycle【Easy】【判断链表是否存在环】

    Given a linked list, determine if it has a cycle in it. To represent a cycle in the given linked lis ...

  6. 第8天-setInterval/setTimeout

    setInterval是什么? setInterval()方法重复调用一个函数或执行一个代码段,在每次调用之间具有固定的时间延迟. setInterval(函数,间隔时间) 例如 function f ...

  7. Flask实战第38天:前台模型创建

    安装shortuuid pip install shortuuid 编辑front.models.py from exts import db import shortuuid from werkze ...

  8. 背包问题(dp基础)

    题目描述: 在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. Input 第1 ...

  9. 安卓android破解方法

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha  313134555@qq.com 如何给smali文件中的unicode字符串添加中文注释 如何注释掉smali文件中包含关键字 ...

  10. BZOJ 1700 [Usaco2007 Jan]Problem Solving 解题(单调DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1700 [题目大意] 共有p道题目要做,每个月收入只有n元,用于付钱做题之外的部分都会吃 ...