场景介绍:
由于项目要求,需要做一个进件(新增)功能,而该功能里要用到车品牌、车系、车型的联动查询,也就是经典的三级联动。
大体思路如下:
进入页面,会把所有的车品牌(第一级)在后台查询出来,放到缓存,页面在循环遍历,当选中车品牌(第一级)的某一项时,会根据此项异步的调用后台的方法,然后渲染到前台页面的车系(第二级),当选中车系(第二级)的某一项时,也会根据此项异步的调用后台的方法,然后渲染到前台页面的车型(第三级)。
当重新选择车品牌(第一级)时,会把车系(第二级)和车型(第三级)置为初始值'请选择车系'、'请选择车型',若车品牌(第一级)不做修改,而只是重新选择车系(第二级)时,则车型(第三级)要置为初始值'请选择车型'。
记录一下其中的难点(我认为的难点):
当重新选择某一级数据时,要把他的下级以及子级都要置为初始值!经过请教同事和搜索引擎,找到了一个叫select()的插件。
下面就贴出项目中关键代码:
JSP表单代码:
<div class="control-group" style="margin-top:12px;">
<label class="controls-label">品牌名称:</label>
<form:select id="operTypeSelect" path="bannerId" class="input-medium" οnchange="getBranchByBrandName()">
<form:option selected="selected" value="">请选择</form:option>
<c:forEach items="${tCdCarBrandList}" var="item" varStatus="status">
<form:option value="${item.id }">${item.brandName }</form:option>
</c:forEach>
</form:select>
<label class="controls-label">车系名称:</label>
<select id="operSelect" name="branchId" class="input-medium" onClick="getModelByBranchName()">
<option selected="selec