springboot+easyui实现二级联动_springboot easyui combox-CSDN博客

本文详细介绍了使用EasyUI和SpringBoot实现二级联动的选择框功能，包括前端样式设置、JS代码逻辑及后端Controller处理，适合希望提升用户体验的前端开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui实现二级联动
在用easyui做项目时发现文档上没有二级联动的介绍，然后自己做了一个，废了好大劲，为了不让不让更多的人卡在这，我尽一点微薄之力，下面是分享代码。
在这里插入图片描述

样式

<td align="right">请选择:</td>
					<td><input id="gardenCombox" class="easyui-combobox" value="阅览室" /> <input id="garden" name="garden" qr="garden" required="true" type="hidden" class="queryRequired" /></td>
					<td align="right">请选择:</td>
					<td><input id="gardenApprovalTypeCombox" class="easyui-combobox" value="计算机" /> <input id="typeId" name="typeId" qr="typeId" required="true" type="hidden" class="queryRequired" /></td>

js代码

$("#gardenCombox").combobox({
				url: "http://localhost:8081/reg/queryonelist",
				method: 'post',
				valueField: 'id', //valueField   string    绑定到 ComboBox 的 value 上的基础数据的名称。(提交值)
				textField: 'name', //textField   string   绑定到 ComboBox 的 text 上的基础数据的名称。（显示值）
				onSelect: function(data) {
					var comid = $('#garden').val(data.name);  //需要改
					$("#roomid").val(data.id)
					$('#gardenApprovalTypeCombox').combobox({
						url: "http://localhost:8081/reg/querytwolist?menid=" + data.id + "",    //向后台传一个id查询外键
						method: 'post',
						editable: false,
						valueField: 'id',
						textField: 'name',
						width: 100,
						onSelect: function(data) {
							$('#typeId').val(data.name);
							$("#comid").val(data.id)
						}
					})

				}
			});

后台controller

/**
	 * @author 查询一级联动
	 * @return consumes 
	 *      
	 */
	@RequestMapping("/queryonelist")
	public List<consumes> queryonelist(){
		List<consumes> onelist =indexser.queryonelist();
		return onelist;
	}
	/**
	 * @author 查询二级联动
	 * @return consumes
	 * 查询到的以List形式返回即可
	 *         
	 */
	@RequestMapping("/querytwolist")
	public List<consumes> querytwolist(int menid){
		List<consumes> onelist =indexser.querytwolist(menid);
		return onelist;
	}

以上就是easyui+springboot实现二级联动代码，如若想自动显示，下拉框不自动隐藏。只需要把点击事件换成触发事件即可，有问题欢迎留言。

宁愿在风雨中陨落，也不要在安逸中虚度人生。