springboot+easyui实现二级联动

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实现二级联动代码，如若想自动显示，下拉框不自动隐藏。只需要把点击事件换成触发事件即可，有问题欢迎留言。

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