EasyUI--combobox(下拉列表框)设值

最新推荐文章于 2025-04-08 20:48:44 发布

iteye_13098

最新推荐文章于 2025-04-08 20:48:44 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： EasyUI combobox

本文链接：https://blog.youkuaiyun.com/iteye_13098/article/details/82614403

前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍了EasyUI中的Combobox组件，将其与HTML的select进行对比，并详细讲解了如何为Combobox设置值，包括valueField与textField的对应关系及其在实际应用中的示例。

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

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
	});
});