实现前端两个下拉框的联动（前端基于bootstrapt和freemarker，后台基于springboot+jpa）

这种联动的话整体思路是：第一级没有任何约束，直接从数据库查询即可；第二级数据查询条件是第一级实体类字段

controller 层：

@ApiOperation(value = "二级网格与一级网格联动", notes = "二级网格与一级网格联动")
@SysLog("二级网格与一级网格联动")
@PostMapping(value = "/findSecondByGrid")
public List<MapSecondGrid> findSecondByGrid(String oneLevelGrid) {
    return this.mapGridService.findSecondByGrid(oneLevelGrid);
}

service 层：

/**
 * @return  二三级网格联动
 */
List<MapSecondGrid> findSecondByGrid(String oneLevelGrid);

serviceImpl 层：

/**
 * @return  二级网格json数据
 */
@Override
public List<MapSecondGrid> findSecondByGrid(String oneLevelGrid) {
    return this.mapSecondGridRepository.findSecondByGrid(oneLevelGrid);
}

Repository 层：

/**
 * @return 二级网格json数据
 */
@Query(value = "select * from map_second_grid where one_level_grid = ?1", nativeQuery = true)
List<MapSecondGrid> findSecondByGrid(String oneLevelGrid);

----------------------------------前端代码-------------------------------

<script>
    $(document).ready(function(){
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getRootPath() + "/map/grid/one",      //这是一级下拉框从数据库取得数据的接口
            success: function (result) {
                $("#firstGridId").empty();
                $("#firstGridId").append("<option value=''>请选择</option>");
                for (var i=0;i<result.length;i++)
                {
                    $("#firstGridId").append("<option value="+result[i].name+">"+result[i].name+"</option>");
                }
            },
            error: function (result) {
                layer.alert("保存失败1，"+result.mess);
            }
        });
    });

    function onchangeMed(value){
        $.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            data: {oneLevelGrid:value},
            url: getRootPath() + "/map/grid/findSecondByGrid",  //这是二级下拉框根据一级字段的值从数据库取得数据的接口
            success: function (result) {
                console.log(result);
                $("#twoLevelGrid").empty();
                $("#twoLevelGrid").append("<option value=''>请选择</option>");
                for (var i=0;i<result.length;i++)
                {
                    $("#twoLevelGrid").append("<option value="+result[i].gridName+">"+result[i].gridName+"</option>");
                }
            },
            error: function (result) {
                layer.alert("保存失败2，"+result.mess);
            }
        });
    }


</script>