EasyUI--combobox (drop-down list box) settings

 The EasyUi combobox drop-down list is equivalent to html select, corresponding to valueField-->value;extField-->text.

 1. A simple example of assigning value to combobox is as follows:

   The page that submits the platform data

//Jump to the role ban page
@RequestMapping(value = "/tolist")
public ModelAndView userMessageYeMian(){
	List<Platform> platforms=platformService.selectPlatform(null);
	return new ModelAndView("gm/mh/userManager/forbidAction").addObject("platforms", platforms);
}

<form action="exportUser.do" id="userMessageForm" method="post">
	<table cellpadding="3" cellspacing="5">
		<tr style="font-size: 13px;">
			<td width="50" align="right">  平台：</td>
			<td  align="left">
				<select class="easyui-combobox" style="width:130px;" name="platformID" id="platformID">
					<c:forEach items="${platforms}" var="platform">
						 <option  value="${platform.platformId}" >${platform.platformName}</option>
					</c:forEach>
				</select>
			</td>
			
			<td width="50" align="right">   服：</td>
			<td align="left">
				<select class="easyui-combobox" style="width:130px;" name="areaID" id="areaID" editable=false panelHeight="auto">
					
				</select>
			</td>
		</tr>
	</table>
</form>

   

$(document).ready(function(){
	//When the page is loaded, go to the background to find the server under the platform according to the platform number, and then select the first direction by default
	var id= jQuery("#platformID  option:selected").val();
	if(id!=null && id !=""){
		$('#areaID').combobox({    
		 url:"./getserver.do?platformId="+id,
			valueField: 'servers',    
			textField:'serverName' ,
			onLoadSuccess:function(){
                                 //After the loading is complete, set the first item to be selected
				var val = $(this).combobox("getData");
				for (var item in val[0]) {
					if (item == "serverid") {
						$(this).combobox("select", val[0][item]);
					}
				}
			}
		});
	}

	//Acquire service data according to the platform (two-level joint search)
	//Reset the server after re-selecting the platform
	$('#platformID').combobox({
		onSelect:function(newValue, oldValue){
			var platformId = $ ('input [name = platformID]') val ();
			server.combobox({
				disabled: false,
				url: "./ getserver.do?platformId="+platformId,
				valueField: 'servers',
				textField: 'serverName'
			}).combobox('clear');
		}
	});

	var server = $('#areaID').combobox({
		valueField: 'servers',
		textField:'serverName',
		editable:false
	});
});

   

//Query service according to platform
@RequestMapping(value="/getserver",method=RequestMethod.POST)
@ResponseBody  
public List<GameServer> getserver(HttpServletRequest request) throws Exception{
	String platformId = request.getParameter("platformId") == "" ? null : request.getParameter("platformId"); //平台名称
	Map<String,Object> params = new HashMap<String,Object>();
	params.put("platformId", platformId);
	List<GameServer> servers = gameServerService.getServerByGameId(params);
	return servers;
}

 

 

2. Improve the example

$(document).ready(function(){
	//Acquisition of service data according to game and platform (two-tier)
	$('#platform').combobox({
		onSelect:function(newValue, oldValue){
			var gameId = $('input[name=gameId]').val();
			var platform = $('input[name=platform]').val();
			
			$ ('# serverId'). combobox ({
				disabled: false,
				url:"./getserver.do?gameId="+gameId+"&platform="+platform,
				valueField: 'servers',
				textField: 'serverName',
				
				//After the loading is successful, set the default selection of the first item
				onLoadSuccess:function(){
					var data = $('#serverId').combobox('getData');
					if(data.length > 0){
						$("#serverId").combobox('setValue',data[0].serverId);
					}
				}
			}).combobox('clear');
		}
	});
	 
	$ ('# serverId'). combobox ({
		valueField: 'serverId',
		textField:'serverName',
		editable:false
	});
});

 

   The page that submits the platform data

//Jump to the role ban page
@RequestMapping(value = "/tolist")
public ModelAndView userMessageYeMian(){
	List<Platform> platforms=platformService.selectPlatform(null);
	return new ModelAndView("gm/mh/userManager/forbidAction").addObject("platforms", platforms);
}