freemaker实现前后端交互多级下拉框

前端

头部引入freemaker声明

<!-- 设置项目根路径全局变量 -->
<#assign ctx=request.contextPath/>

下拉列表

<tr>
<td>商品分类:</td>
<td>
<div class="col-xs-3">
<select name="cat_id" id="cat_id" onchange="getCategory(this.value,'cat_id_2');" class="form-control" style="width:250px;margin-left:-15px;">
 <option value="0">请选择商品分类</option>
<#--获取后端放在request请求域中名称为gcList的数据-->
 <#list gcList as gc>
<option value="${gc.id}">${gc.name}</option>
</#list>
</select>
</div>
 <div class="col-xs-3">
<select name="cat_id_2" id="cat_id_2" onchange="getCategory(this.value,'cat_id_3');" class="form-control" style="width:250px;margin-left:-15px;">
<option value="0">请选择商品分类</option>
</select>
</div>
<div class="col-xs-3">
<select name="cat_id_3" id="cat_id_3" class="form-control" style="width:250px;margin-left:-15px;">
<option value="0">请选择商品分类</option>
</select>
</div>
<span id="err_cat_id" style="color:#F00; display:none;">
</span>
</td>
</tr>

js代码

  /**
     * 获取多级联动的商品分类
     * id:当前选择框的值
     * next：下级选择框显示的内容
     * select_id:level
     */
    function getCategory(id, next, select_id) {
        var url = '${ctx}/goods/category/' + id;
        // 用户重新选择顶级分类时，重置下级分类为：请选择商品分类，且清空下级分类信息
        var htmlStr = "<option value='0'>请选择商品分类</option>";
        if (0 == id) {
            $("#" + next).html(htmlStr);
            return;
        }
        $.ajax({
            type: "GET",
            url: url,
            error: function (request) {
                layer.alert("获取子分类失败！");
            },
            success: function (result) {
                if (result.length > 0) {
                    for (i = 0; i < result.length; i++) {
               htmlStr += "<option value='" + result[i].id + "'>" + result[i].name + " </option>"
                    }
              //将获取的子分类一次性插入到对应的<select></select>中
              $("#" + next).html(htmlStr);
                } else {
                    layer.alert("获取子分类失败！");
                }
            }
        });
    }

原理：

当加载到该页面时，发送一个请求，获取顶级分类列表（此处没有声明该请求，请自行添加），如果顶级分类被点击，会响应
getCategory()方法，携带父id，向后端发送请求获取次级分类，当次级被点击时，同样响应getCategory()
方法，获取再次级的分类

后端
controller层

跳转到下拉框页面，并向请求域中添加gcList
//获取所有顶级分类
    @RequestMapping("/add")
    public String categoryAdd(Model model){//跳转到新增分类页面
        List<GoodsCategory> gcList = goodsCategoryService.selectCategoryTopList();
        model.addAttribute("gcList",gcList);
        return "goods/category/category-add";
    }
//根据父分类id获取对应的子分类列表
    @GetMapping("{parentId}")
    @ResponseBody
    public List<GoodsCategory> selectCategoryByparentId(@PathVariable short parentId){
    //获取次级分类
        return goodsCategoryService.selectCategoryByparentId(parentId);
    }

service层

//可根据使用的ORM框架进行替换，这里用的是mybatis逆向工程
    /**
     * 查询顶级目录
     * @return
     */
    @Override
    public List<GoodsCategory> selectCategoryTopList() {
        // 创建查询对象
        GoodsCategoryExample example = new GoodsCategoryExample();
        //  设置查询条件，parent_id=0
        example.createCriteria().andParentIdEqualTo((short) 0);
        return goodsCategoryMapper.selectByExample(example);
    }
    /**根据顶级目录id查询对应的次级id
     * @param parentId
     * @return
     */
    @Override
    public List<GoodsCategory> selectCategoryByparentId(short parentId) {//根据父id查询子目录
        //创建查询对象
        GoodsCategoryExample example = new GoodsCategoryExample();
        //设置查询条件
        example.createCriteria().andParentIdEqualTo(parentId);
        return goodsCategoryMapper.selectByExample(example);
    }