需求描述：點(diǎn)擊服務(wù)類型下拉框，選擇后，后邊的服務(wù)類別會(huì)自動(dòng)的匹配到與服務(wù)類型相對(duì)應(yīng)的，臥槽，繞來繞去的，說不明白啦。舉個(gè)例子：服務(wù)類型A,B,C三個(gè)可選，當(dāng)選擇A的時(shí)候，服務(wù)類別會(huì)自動(dòng)填充上A01，A02，A03，當(dāng)選擇B的時(shí)候，服務(wù)類別會(huì)自動(dòng)填充上Bf，Bg，Bh，當(dāng)選擇C的時(shí)候，服務(wù)類別會(huì)自動(dòng)填充上C1，C2，C3，就是和地區(qū)三級(jí)聯(lián)動(dòng)差不多的那種，我靠，最后一句就說明白了，暈死_(|3」∠)_

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

代碼：

//后臺(tái)java代碼 去新增頁面
map.addAttribute("serviceTypeList", serviceTupe);
return VIEW_PATH + "/add";
//html代碼：前臺(tái)遍歷取出服務(wù)類型 select的value是list(serviceTypeList)中元素的code select的text是元素的name
<div class="col-md-5">
<select id="serviceType" name="serviceType" placeholder="請(qǐng)選擇服務(wù)類型">
<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="請(qǐng)選擇服務(wù)類別">
　　　　//說明一下 select的option選項(xiàng)是后邊的js里拼接上去的
</select>
</div>

//js代碼：當(dāng)服務(wù)類型的select被觸發(fā)選擇了，執(zhí)行查詢服務(wù)類型選擇的內(nèi)容的下屬值，也就是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();
　　 //去后臺(tái)findServClass方法查 根據(jù)選擇的服務(wù)類型查詢出對(duì)應(yīng)的下屬值
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也就是第二個(gè)下拉框拼接上option選擇項(xiàng)
$("#serviceClass").append($("<option/>").text(result['className']).attr("value",result['classCode']));
});
}else{
$("#serviceClass").empty();
}
});

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

說明：中間傳遞了一個(gè)serviceName沒有用到，而是用了serviceCode，這是因?yàn)樵跀?shù)據(jù)庫表服務(wù)類別表serviceClass表中有serviceCode服務(wù)編碼這個(gè)字段，所以只要加上where serviceCode=‘xx服務(wù)編碼’ 就可已查出對(duì)應(yīng)的下屬值

轉(zhuǎn)載于:https://www.cnblogs.com/xuchao0506/p/9772982.html

總結(jié)

以上是生活随笔為你收集整理的下拉框的二级联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。