欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

EasyUI--combobox(下拉列表框)设值 博客分类: 前端 EasyUIcombobox 

程序员文章站 2024-02-18 22:31:34
...

 EasyUi combobox下拉列表相当于html的select,对应关系valueField-->value;extField-->text。

 1、一个简单的为combobox赋值的例子如下:

   将平台数据提交的页面
//跳转到角色封禁页面
@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">&nbsp;&nbsp;平台:</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"> &nbsp;&nbsp;服:</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(){
	//在页面加载的时候根据平台号去后台查找平台下的服务器,然后默认选择第一向
	var id= jQuery("#platformID  option:selected").val();
	if(id!=null && id !=""){
		$('#areaID').combobox({    
		 url:"./getserver.do?platformId="+id,
			valueField:'serverid',    
			textField:'serverName' ,
			onLoadSuccess:function(){ 
                                 //加载完成后,设置选中第一项
				var val = $(this).combobox("getData");
				for (var item in val[0]) {
					if (item == "serverid") {
						$(this).combobox("select", val[0][item]);
					}
				}
			}
		}); 
	}

	//根据平台获得服务数据(二级联查)
	//当重新选择平台后重新设置服务器
	$('#platformID').combobox({
		onSelect:function(newValue, oldValue){
			var platformId = $('input[name=platformID]').val();
			server.combobox({
				disabled: false,
				url:"./getserver.do?platformId="+platformId,
				valueField: 'serverid',
				textField: 'serverName'
			}).combobox('clear');
		}
	});

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

   

//根据平台查询服
@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、提高例子

$(document).ready(function(){
	//根据游戏、平台获得服务数据(二级联)
	$('#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: 'serverid',
				textField: 'serverName',
				
				//加载成功后,设置默认选择第一项
				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
	});
}); 

 

相关标签: EasyUI combobox