实现下拉框三级联动效果

前端 专栏收录该内容
11 篇文章 0 订阅

数据库设计

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].name + "'>" + 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表示当前的参数,这样写避免运行时出错

  • 3
    点赞
  • 0
    评论
  • 2
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论
请先登录 后发表评论~
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

wxm192939

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值