省市區縣三級聯動JAVA+MySQL+JQuery

場景介紹：

        由於項目要求，需要做一個進件(新增)功能，而該功能里要用到車品牌、車系、車型的聯動查詢，也就是經典的三級聯動。

大體思路如下：

        進入頁面，會把所有的車品牌(第一級)在后台查詢出來，放到緩存，頁面在循環遍歷，當選中車品牌(第一級)的某一項時，會根據此項異步的調用后台的方法，然后渲染到前台頁面的車系(第二級)，當選中車系(第二級)的某一項時，也會根據此項異步的調用后台的方法，然后渲染到前台頁面的車型(第三級)。

        當重新選擇車品牌(第一級)時，會把車系(第二級)和車型(第三級)置為初始值'請選擇車系'、'請選擇車型'，若車品牌(第一級)不做修改，而只是重新選擇車系(第二級)時，則車型(第三級)要置為初始值'請選擇車型'。

記錄一下其中的難點(我認為的難點)：

        當重新選擇某一級數據時，要把他的下級以及子級都要置為初始值！經過請教同事和搜索引擎，找到了一個叫select()的插件。

下面就貼出項目中關鍵代碼：

        JSP表單代碼：

<div class="control-group" style="margin-top:12px;">
    <label class="controls-label">品牌名稱：</label>
    <form:select id="operTypeSelect" path="bannerId" class="input-medium" onchange="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="selected" value="">請選擇</option>
        <c:forEach items="${tCdCarBranchList}" var="item" varStatus="status">
        </c:forEach>
    </select>
    <label class="controls-label">車型名稱：</label>
        <select id="modelsId" name="modelId" class="input-medium" style="width:400px;">
        <option selected="selected" value="">請選擇</option>
        <c:forEach items="${tCdCarModelList}" var="item" varStatus="status">
        </c:forEach>
    </select>
</div>

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:"<span style="font-family: Arial, Helvetica, sans-serif;">你的后台方法訪問路徑</span>",
        cache:false,
        async:false,
        processData:true,
        dataType:"json",
        success:function(tCdCarBrandList) {
            if (tCdCarBrandList != null && tCdCarBrandList.length > 0) {
                var str = "<option value=''> " + "請選擇" + "</option>;";
                $.each(tCdCarBrandList, function(i, item) {
                    if (item != "") {
                        str = str + "<option value="+item.id+"> " + item.branchName + "</option>;";
                        $("#operSelect").html(str);
                    } else {
                        $("#operSelect").html("<option id = oper value=''>請選擇</option>");
                    }
                });
            } else {
                $("#operSelect").html("<option id = oper>請選擇</option>");
            }
            <span style="rgb(255, 0, 0);">$("#operSelect").select();</span>
            $("#modelsId").html("<option value=''>請選擇</option>");
            <span style="background-color: rgb(255, 0, 0);">$("#modelsId").select();</span>
        }
    });
}
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 = "<option value=''> " + "請選擇" + "</option>;";
                $.each(tCdCarModelList, function(i, item) {
                    if (item != "") {
                        str = str + "<option value="+item.id+"> " + item.modelName + "</option>;";
                        $("#modelsId").html(str);
                    } else {
                        $("#modelsId").html("<option value=''>請選擇</option>");
                    }
                });
            } else {
                $("#operSelect").html("<option value=''>請選擇</option>");
            }
            <span style="background-color: rgb(255, 0, 0);">$("#modelsId").select();</span>
        }
    });
}

后台JAVA部分查詢代碼：

@ResponseBody
@RequestMapping(value="findBranchByBrandName")
public List<TCdCarBranch> findBranchByBrandName(TCdCarBranch tCdCarBranch,
        HttpServletRequest request, HttpServletResponse response, Model model) {
    // SQL中只用到了ajax中data的brandId,brandId與tCdCarBranch里的brandId字段對應
    List<TCdCarBranch> tCdCarBranchList = tCdCarBranchService.findList(tCdCarBranch);
    model.addAttribute("tCdCarBranchList", tCdCarBranchList);
    return tCdCarBranchList;
}

@ResponseBody
@RequestMapping(value="findModel")
public List<TCdCarModel> findModel(TCdCarModel tCdCarModel, HttpServletRequest request,
        HttpServletResponse response, Model model) {
    // SQL中只用到了ajax中data的brandId和branchId
    // brandId和branchId與tCdCarModel里的brandId和branchId字段分別對應
    List<TCdCarModel> tCdCarModelList = tCdCarModelService.findList(tCdCarModel);
    model.addAttribute("tCdCarModelList", tCdCarModelList);
   return tCdCarModelList;
}

其中JS部分代碼中背景為紅色高亮代碼即是可以將其下級以及子級置為初始化的關鍵代碼，當初就是這行代碼困擾了很少時間，

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

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