下拉框的二級聯動

需求描述：點擊服務類型下拉框，選擇后，后邊的服務類別會自動的匹配到與服務類型相對應的，卧槽，繞來繞去的，說不明白啦。舉個例子：服務類型A,B,C三個可選，當選擇A的時候，服務類別會自動填充上A01，A02，A03，當選擇B的時候，服務類別會自動填充上Bf，Bg，Bh，當選擇C的時候，服務類別會自動填充上C1，C2，C3，就是和地區三級聯動差不多的那種，我靠，最后一句就說明白了，暈死_(¦3」∠)_

思路分析：后台查服務類型的Aname和Acode，並且放到一個list中。把這個list傳遞到前台去遍歷取值。對這個select加一個監聽，如果選擇了，就獲取到選擇內容，並且可以得到該服務類型的Aname和Acode，把Aname和Acode通過ajax傳遞到后台，后台接收(查數據庫的條件，用哪個，傳遞那個)，查數據庫，查詢條件是Aname 或者 Acode，得到服務類別的list，同樣的把該list傳遞到前台，前台拼接      廢話就這么多了，上代碼：

代碼：

//后台java代碼 去新增頁面
map.addAttribute("serviceTypeList", serviceTupe);
return VIEW_PATH + "/add";

//html代碼：前台遍歷取出服務類型 select的value是list(serviceTypeList)中元素的code select的text是元素的name
<div class="col-md-5">
    <select id="serviceType" name="serviceType" placeholder="請選擇服務類型">
        <option th:each="level : ${serviceTypeList}" 
　　　　　　　　　 th:value="${level.serviceCode}"
                th:text="${level.serviceName}" xmlns:th="http://www.w3.org/1999/xhtml">
　　　　 </option>
    </select>
    <input type="hidden" th:value="${inputType}" name="inputType" id="inputType"/>
</div>
<div class="col-md-5">
    <select id="serviceClass" name="serviceClass" placeholder="請選擇服務類別">
　　　　//說明一下 select的option選項是后邊的js里拼接上去的
    </select>
</div>

//js代碼：當服務類型的select被觸發選擇了，執行查詢服務類型選擇的內容的下屬值，也就是A01 A02 A03或者Bf Bg Bh或者 C1 C2 C3
$("#serviceType").on("change",function () {
    debugger;
    var seled = $(this).val();
    $("#inputType").val(seled);
    var serviceText=$("#serviceType").find("option:selected").text();
    var serviceVal=$("#serviceType").val();
　　 //去后台findServClass方法查  根據選擇的服務類型查詢出對應的下屬值
    var url = rootPath + '/serv/service/findServClass';
    var s = CommnUtil.ajax(url, {
        serviceName: serviceText,
        serviceCode: serviceVal
    }, "json");
    if(!!s && s.length > 0){
        $("#serviceClass").empty();
        var item;
        $.each(s,function(i,result){
　　　　　　　//給serviceClass也就是第二個下拉框拼接上option選擇項
            $("#serviceClass").append($("<option/>").text(result['className']).attr("value",result['classCode']));
        });
    }else{
        $("#serviceClass").empty();
    }
});

//后台java代碼 findServClass方法
@RequestMapping("/findServClass")
@ResponseBody
public Object findServClass(String serviceName,String serviceCode){
    List<ServiceClass> list =  new ArrayList<>();
    try {
       //根據serviceCode查出服務類別  serviceName沒有用到，這個參數可以不用傳的
        list=sysServService.serviceClassList(serviceCode);
    } catch (Exception e){
        e.printStackTrace();
    }
    return list;//返回的list就是上邊的ajax里的s
}

說明：中間傳遞了一個serviceName沒有用到，而是用了serviceCode，這是因為在數據庫表服務類別表serviceClass表中有serviceCode服務編碼這個字段，所以只要加上where serviceCode=‘xx服務編碼’ 就可已查出對應的下屬值