Thymeleaf+jQuery+Ajax实现二级下拉框联动

更好的阅读体验到我的博客：Thymeleaf+jQuery+Ajax实现二级下拉框联动

下拉框联动就是，后一个下拉框的内容根据前一个下拉框的内容动态加载，例如：前一个下拉框是省份，后一个下拉框是市，它们之间存在关联

第一个下拉框的内容在页面跳转的时候就直接从Java后端获取并加载

第二个下拉框的内容则监听第一个下拉框的内容是否改变了（通过onchange属性监听，属性值为内容改变请求的JavaScript方法），每改变一次就从Java后端获取一次数据，然后通过jQuery动态生成选项

第一个下拉框是商品类别，第二个是对应的商品名称

商品类别使用Thymeleaf获取并加载，onchange="getGoodsNameTestPage()"实现监听内容的改变并请求getGoodsNameTestPage()方法

    商品类别：  
    
        选择商品类别...
        

            
        
    


    商品名称：  
    
        先选择商品类别...
    

主要是向页面传递goodsTypeList

@RequestMapping("/toTestPage")
public ModelAndView toTestPage() {
    ModelAndView mav = new ModelAndView();
    List goodsTypeList = goodsTypeService.list(null);
    mav.addObject("goodsTypeList", goodsTypeList);
    mav.addObject("title", "测试界面--LeDao校园二手交易平台");
    mav.addObject("mainPage", "page/test");
    mav.addObject("mainPageKey", "#b");
    mav.setViewName("index");
    return mav;
}

//下拉框联动
function getGoodsNameTestPage() {
    let goodsTypeId = $("#goodsTypeIdTestPage").val();
    //当goodsTypeId为空,就结束方法并添加默认选项
    if (goodsTypeId === "") {
        $("#goodsNameTestPage").empty().append('选择商品名称...');
        return false;
    }
    $.ajax({
        type: "get",
        url: "/getGoodsListByGoodsTypeId?goodsTypeId=" + goodsTypeId,
        success: function (result) {
            let goods = $("#goodsNameTestPage").empty();
            //添加默认选项
            goods.append('选择商品名称...');
            for (let i = 0; i < result.length; i++) {
                goods.append("" + result[i].name + "");
            }
        }
    });
}

主要是获取对应商品类别的商品集合并返回

@ResponseBody
@RequestMapping("/getGoodsListByGoodsTypeId")
public List getGoodsListByGoodsTypeId(Integer goodsTypeId) {
    QueryWrapper goodsQueryWrapper = new QueryWrapper<>();
    goodsQueryWrapper.eq("goodsTypeId", goodsTypeId);
    return goodsService.list(goodsQueryWrapper);
}

如果不使用Thymeleaf，那么第一个下拉框的内容在页面一加载时就通过Ajax请求Java后端来获取