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

概述

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

实现办法

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

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

实现过程

下拉框描述

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

HTML代码

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

<div class="form-group form-inline" onchange="getGoodsNameTestPage()">
    <label for="name">商品类别：</label>&nbsp;&nbsp;
    <select id="goodsTypeIdTestPage" name="goodsTypeId" required="required" class="form-control">
        <option value="">选择商品类别...</option>
        <div th:each="goodsType:${goodsTypeList}">
            <option th:text="${goodsType.name}" th:value="${goodsType.id}"></option>
        </div>
    </select>
</div>
<div class="form-group form-inline">
    <label for="name">商品名称：</label>&nbsp;&nbsp;
    <select id="goodsNameTestPage" name="goodsTypeId" required="required" class="form-control">
        <option value="">先选择商品类别...</option>
    </select>
</div>

跳转页面的控制层方法

主要是向页面传递goodsTypeList

/**
 * 跳转到测试界面
 *
 * @return
 */
@RequestMapping("/toTestPage")
public ModelAndView toTestPage() {
    ModelAndView mav = new ModelAndView();
    List<GoodsType> 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;
}

JavaScript请求的方法

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

Ajax请求的后端方法

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

/**
 * 根据商品类别id获取商品集合
 *
 * @param goodsTypeId
 * @return
 */
@ResponseBody
@RequestMapping("/getGoodsListByGoodsTypeId")
public List<Goods> getGoodsListByGoodsTypeId(Integer goodsTypeId) {
    QueryWrapper<Goods> goodsQueryWrapper = new QueryWrapper<>();
    goodsQueryWrapper.eq("goodsTypeId", goodsTypeId);
    return goodsService.list(goodsQueryWrapper);
}