实现下拉框三级联动效果

数据库设计

html代码

<div class="form-group">
							<label class="col-sm-2 control-label">钢种组</label>
							<div class="layui-input-inline col-sm-1" style="display: inline-block; padding: 0">
								<select id="gangzhongzu" th:name="id" lay-search="" style="width:80px; height: 25px; border: 1px solid #ccc">
									<option value="" >请选择</option>
									<option th:each="a:${chanpinxinxiDO}" th:value="${a.id}" th:text="${a.name}"></option>
								</select>
							</div>
							<label class="col-sm-2 control-label" >炉次</label>
							<div class="layui-input-inline col-sm-1" style="display: inline-block; padding: 0">
								<select id="luci"  th:name="luci" lay-search="" style="width:80px; height: 25px; border: 1px solid #ccc">
									<option value="" >请选择</option>
<!--									<option th:each="b:${JihaoDO}" th:value="${b.id}" th:text="${b.name}" ></option>-->
								</select>
							</div>
							<label class="col-sm-2 control-label " style="text-align: right">记号：</label>
							<div class="col-sm-2">
								<select id="jihao" th:name="jihao" lay-search="" style="width:80px; height: 25px; border: 1px solid #ccc">
									<option value="" >请选择</option>
									<!--									<option th:each="b:${JihaoDO}" th:value="${b.id}" th:text="${b.name}" ></option>-->
								</select>
							</div>
						</div>

js代码

$("#gangzhongzu").change(function () {
	var id = $("#gangzhongzu").val();

	if (id == null) {
		return;
	}
	$.ajax({
		cache: true,
		type: "get",
		url: "/system/chanpinxinxi/queryList2",
		data: {"id": id},
		success: function (data) {
			var luci = $("#luci").empty();
			for (var i = 0; i < data.length; i++) {
				luci.append("<option value = '"+ data[i].id + "'>" + data[i].name + "</option>");
			}
		}
	})
})

$("#luci").change(function () {
	var id = $("#luci").val();

	if (id == null) {
		return;
	}
	$.ajax({
		cache: true,
		type: "get",
		url: "/system/chanpinxinxi/queryList3",
		data: {"id": id},
		success: function (data) {
			console.log(data)
			var jihao = $("#jihao").empty();
			for (var i = 0; i < data.length; i++) {
				jihao.append("<option value = '"+ data[i].id + "'>" + data[i].name + "</option>");
			}
		}
	})
})

在跳转到添加页面的时候，去数据库查询shangjiid=0的数据，返回的数据使用自定义GangzhongzuDO来接收,存入modelMap中带入add.html页面

package com.bootdo.system.domain;

public class GangzhongzuDO {

    private  Integer id;
    private  String  name;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

再根据传递过来的参数id（即一级下拉框的id）去查询旗下的数据联动展示在第二个下拉框里，返回的数据跟数据库一致,返回数据用LuciDO接收

LuciDO

public class LuciDO {
    private  Integer id;
    private  String  name;
    private Integer shangjiid;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

@GetMapping("/queryList2")
	@ResponseBody
	public List queryList1 (@RequestParam(value = "id") Integer id) {
		//根据数据库Id查询对应的数据类型
		List<LuciDO> luciDO = chanpinxinxiService.queryList2(id);
		if (luciDO == null) {
			throw new RuntimeException("数据为空！");
		}
		return luciDO;
	}
	

前面的js代码将获取的Luci的id，根据sql 的查询操作找到第三级value，即JiHao的名称。

package com.bootdo.system.domain;

public class JihaoDO {

    private  Integer id;
    private  String  name;
    private Integer shangjiid;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

// todo
	@GetMapping("/queryList3")
	@ResponseBody
	public List queryList3 (@RequestParam(value = "id") Integer id) {
		//根据数据库Id查询对应的数据类型
		List<JihaoDO> JihaoDO = chanpinxinxiService.queryList3(id);
		if (JihaoDO == null) {
			throw new RuntimeException("数据为空！");
		}
		return JihaoDO;
	}

mapper.xml

<select id="queryList" resultType="com.bootdo.system.domain.GangzhongzuDO">
	 select  A.id, A.name
	from tb_chanpinxinxi AS A
	where shangjiid=0
	</select>


	<select id="queryList2" resultType="com.bootdo.system.domain.LuciDO" parameterType="java.lang.Integer">
		select  C.id, C.name
		from tb_chanpinxinxi AS C
		where
			shangjiid=#{_parameter}
	</select>

	<select id="queryList3" resultType="com.bootdo.system.domain.LuciDO" parameterType="java.lang.Integer">
		select  C.id, C.name
		from tb_chanpinxinxi AS C
		where
			shangjiid=#{_parameter}
	</select>

@GetMapping("/add")
	@RequiresPermissions("wuliao:gongyidan:add")
	public String add(ModelMap map){
		//查询列表数据
		List<WuliaoxinxiDO> list=wuliaoxinxiService.queryList();
		List<GangzhongzuDO> list1=chanpinxinxiService.queryList();
		map.addAttribute("chanpinxinxiDO",list1);
		map.addAttribute("wuliaoxinxiDO",list);
		return "wuliao/gongyidan/add";
	}

注：_parameter表示当前的参数，这样写避免运行时出错