下拉框的二级联动

Posted 2021-01-11 xuchao0506

需求描述：点击服务类型下拉框，选择后，后边的服务类别会自动的匹配到与服务类型相对应的，卧槽，绕来绕去的，说不明白啦。举个例子：服务类型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 () {
        //代码省略
    });
}