EasyUI's combobox implements three-level query

1、 Business needs

Select a dormitory building , Then choose a floor of the building , Then choose a bedroom on this floor

2、 Realize the idea

First query the list of dormitory buildings from the database , Initialize the combo box of the dormitory building , Let the user choose one of them , After choosing, transfer the building to the backstage , Let the background find out which floors the building has according to this value , Fill the query results into the combo box of the floor , After the user selects again, the floor and dormitory building will be returned to the background , The background queries the building according to these two parameters 、 All dormitories on this floor

3、 The front-end code

		<div>
			<span> Dormitory building </span>
			<input id="bid" class="easyui-combobox" name="bid" 
					data-options="
						url:'${pageContext.request.contextPath}/getbid.action',// Background method of loading dormitory data 
						method:'get',
						valueField:'id',
						textField:'text',
						editable:false,
						// When a user selects an item , Trigger this event ,rec For the user's current selection 
						onSelect:function(rec){
							var bid=rec.text;// Value 
							$('#floor').combobox('clear');// Clear the option of the previous floor 
							// Background method of loading floor data , Splice parameters to url On 
							var url='${pageContext.request.contextPath}/getfloor.action?bid='+bid;
							$('#floor').combobox('reload',url);// Reload the data of the floor 
						}" />
			<span> floor </span>
			<input id="floor" class="easyui-combobox" name="floor" 
					data-options="
						valueField:'id',
						textField:'text',
						editable:false,
						onSelect:function(rec){
							var bid=$('#bid').combobox('getValue');
							var floor=rec.text;
							// Clear the previous dormitory options 
							$('#room').combobox('clear');
							// Background method of loading dormitory , Splice parameters to url On 
							var url='${pageContext.request.contextPath}/getroom.action?bid='+bid+'&floor='+floor;
							$('#room').combobox('reload',url);// Reload 
						}" />
			<span> dormitory </span>
			<input id="room" class="easyui-combobox" name="room" 
					data-options="
						valueField:'id',
						textField:'text',
						editable:false
					" />
			<a id="search-btn" href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-search"> Inquire about </a>
		</div>

of no avail JavaScript Assign your own... To the floor and dormitory number url Because my floor and dormitory must have parameters , If in script The... They load is given in url, When the page is loaded, it will automatically go to the background to execute the method , But at this time, the dormitory building has not chosen , Therefore, there are no parameters , Browser's console You're going to report a mistake , Cause the program cannot continue to execute

4、 Background code

controller

	/**
	 *  Check all dormitory buildings 
	 * @return
	 */
	@RequestMapping(value="/getbid.action")
	@ResponseBody
	public List<ComboboxModel> getBid()
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDbidType();
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}
	
	/**
	 *  Query the number of floors of the selected dormitory building 
	 * @param bid  Selected dormitory building 
	 * @return
	 */
	@RequestMapping(value="/getfloor.action")
	@ResponseBody
	public List<ComboboxModel> getFloor(@RequestParam("bid")String bid)
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDfloorType(bid);
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}
	
	/**
	 *  Query the dormitory number of the selected floor 
	 * @param bid  Selected dormitory building 
	 * @param floor  Selected floor 
	 * @return
	 */
	@RequestMapping(value="/getroom.action")
	@ResponseBody
	public List<ComboboxModel> getRoom(@RequestParam("bid")String bid,@RequestParam("floor") String floor)
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDroomType(bid, floor);
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}

Specifically for combobox Built for pojo

package com.pojo;

public class ComboboxModel {
	
	private String id;// Used as a combobox Of value
	
	private String text;// Used as a combobox Of text
	
	public ComboboxModel() {
		super();
	}
	
	public ComboboxModel(String id, String text) {
		super();
		this.id = id;
		this.text = text;
	}

	public String getId() {
		return id;
	}
	
	public void setId(String id) {
		this.id = id;
	}
	
	public String getText() {
		return text;
	}
	
	public void setText(String text) {
		this.text = text;
	}
	
	@Override
	public String toString() {
		return "ComboboxModel [id=" + id + ", text=" + text + "]";
	}
}