级联下拉框数据的动态加载（SpringBoot + mybatis-plus + Thymeleaf）

今天在做毕设时，想给前端加一个级联下拉框，用来查询二手车，因为前端用的是Thymeleaf框架，我前端学的不行，Thymeleaf框架也是做毕设前跟着B站网课现学的，因此在实现这个级联下拉框花了很长时间，在此做个笔记。

最终实现效果：

• 首先我要实现的功能是：

1. 后端通过mybatis-plus技术获取到数据库中的二手车品牌和子品牌信息
2. 通过model传到前端，在前端对品牌和子品牌实现级联功能

• 数据获取实现过程：

1. 先获取到所有的品牌信息
2. 通过品牌信息获取到子品牌信息

代码：
① Controller层

//查询数据库中的车辆类型并传到前端，用于显示级联下拉框
List<Object> brands = carService.carBrands();

//定义一个Map用来存放车辆的品牌信息
Map<String, List<Object>> brandMap = new LinkedHashMap<>();
for (Object brand : brands) {
     List<Object> subBrands = carService.carSubBrands((String) brand);
     brandMap.put((String) brand, subBrands);
}

model.addAttribute("brandMap", brandMap);

② 操作数据库部分的代码

/**
 * 获取数据库中所有车辆的品牌
 * @return
 */
@Override
public List<Object> carBrands() {
    QueryWrapper<Car> queryWrapper = new QueryWrapper<>();
    queryWrapper.select("car_brand")
            .groupBy("car_brand");
    return carMapper.selectObjs(queryWrapper);
}

/**
 * 查询车辆的子品牌
 * @param carBrand 车辆的品牌
 * @return
 */
@Override
public List<Object> carSubBrands(String carBrand) {
    QueryWrapper<Car> queryWrapper = new QueryWrapper<>();
    queryWrapper.select("car_type")
            .eq("car_brand", carBrand)
            .groupBy("car_type");
    return carMapper.selectObjs(queryWrapper);
}

最后得到的Map类型是Map的

③ 前端部分

<form th:action="@{/user/query}" class="display_flex">
    <div class="align-items-center display_flex">
        <label for="brand" >品牌 label>
        <select style="width: 150px;" id="brand" th:class="form-select" onchange="getBrand()">
            <option th:each="brand : ${brandMap}" th:value="${brand.getKey()}">[[${brand.getKey()}]]option>
            <option value="" >--请选择--option>
        select>
    div>
    <div class="align-items-center display_flex">
        <label for="subBrand" >  子品牌 label>
        <select style="width: 150px;" id="subBrand" th:class="form-select">
        select>
    div>
form>

<script>
    //设置二级下拉框的数据
    function getBrand() {
        var brand = document.getElementById("brand").value;
        var brandMap = [[${brandMap}]];
        var subBrand = document.getElementById("subBrand");

        //每次添加之前将原先的下拉框清空
        subBrand.options.length = 0;
        subBrand.options.add(new Option("--请选择--", ""));
        var list = brandMap[brand];
        for (var i in list) {
            subBrand.options.add(new Option(list[i]), list[i]);
        }
    }
script>

④ 成功实现功能

• 总结

在做这个功能的时候钻了牛角尖，二级菜单也想用一级菜单的方式用thymeleaf框架中的th:each进行输出显示

---

二级菜单之前的实现方法是：

<option th:each="subBrand : ${brandMap.get('奥迪')}" th:value="${subBrand}">[[${subBrand}]]option>

这种方法确实可以去除所有奥迪的子品牌，但是.get()方法中没找到方法将参数传入，所以一直在找方法传参，导致浪费了很多时间。

最后在csdn上找到一篇实现二级级联下拉框的博客得到解决。

—End—