1. 程式人生 > >下拉框的二級聯動

下拉框的二級聯動

fff append 二級 前臺 數據庫表 option return 那種 後臺

需求描述:點擊服務類型下拉框,選擇後,後邊的服務類別會自動的匹配到與服務類型相對應的,臥槽,繞來繞去的,說不明白啦。舉個例子:服務類型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服務編碼’ 就可已查出對應的下屬值

註意一點:js代碼要寫在初始化中,也就是

$(function () {
$("#serviceType").on("change",function () {
//代碼省略
});
}

下拉框的二級聯動