`

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

阅读更多

 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-textbox和easyui-combobox的onchange事件响应实例

    `easyui-combobox` 则是一个下拉选择框组件,允许用户从预定义的选项列表中选择一项。这两个组件在网页表单中非常常见,可以用于收集用户的输入数据。 `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素...

    在easyui-combobox多选模式下加入选择所有选项

    Combobox是EasyUI中的一个下拉框组件,它结合了输入框和下拉列表的优点,常用于数据筛选或选择操作。在单选模式下,用户只能选择一个选项。然而,在某些场景下,用户可能需要同时选择多个选项,这时就需要开启...

    EasyUI学习之Combobox下拉列表(1)

    本文实例为大家分享了EasyUI Combobox下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 性别: &lt;input class="easyui-combobox" style="width: 100px;" type="text" id="gender" /&gt; 2.显示 3.js...

    easyui中combobox后台交互实例

    EasyUI是一个基于jQuery的轻量级前端框架,它提供了一系列易于使用的UI组件,包括Combobox,用于创建下拉列表框,同时支持后台数据加载,实现动态筛选和搜索功能。 **EasyUI Combobox组件** EasyUI的Combobox组件...

    easyui-combobox、combotree后台数据数据组装与前台绑定实例

    Combobox 是 EasyUI 中的一个基础组件,它允许用户从下拉列表中选择一个值。在后端,我们需要组装数据成 JSON 格式,以便于传递给前端。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读...

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    jquery-easyui-1.3.2 demo

    2. **Combobox and Combotree**:这两个组件用于创建下拉列表和下拉树。Combobox用于简单的选项选择,而Combotree则适用于层级结构的数据选择。通过这些示例,你可以学习如何绑定数据源,如何触发事件,以及如何实现...

    jquery-easyui-1.3.1

    5. **Combobox**:Combobox 是下拉选择框组件,它提供了输入框和下拉列表的组合,方便用户在预设选项中选择,同时允许自定义输入。 6. **Layout**:Layout 组件用于构建页面布局,支持多区域划分,方便创建复杂且...

    jquery-easyui-1.4.2.zip

    5. **下拉框(Combobox)**:结合了输入框和下拉列表,常用于选择项输入,可以极大地提高用户输入的效率和准确性。 6. **滑块(Slider)**:用于创建可滑动的条形控件,适用于数值选择或进度条显示。 此外,jQuery...

    ComboBox下拉框内字体加颜色

    在默认情况下,ComboBox内的文本都是单一的颜色,但有时为了提高可读性或者美化界面,我们可能需要为ComboBox下拉框内的字体添加不同的颜色。本篇文章将详细介绍如何在ComboBox下拉框内实现字体加颜色的功能。 首先...

    jquery-easyui-1.3.1.zip

    - **组件丰富**:jQuery EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、树形控件(Tree)、下拉选择框(ComboBox)、菜单(Menu)等多种常见的 UI 控件,满足开发各种复杂界面的需求。 - **响应式设计**:...

    jquery-easyui-1.5.3

    1.2 主要组件:jQuery EasyUI 提供了包括对话框(Dialog)、表格(Grid)、菜单(Menu)、按钮(Button)、表单(Form)等多种组件,以及下拉列表(Combobox)和Layout布局在内的高级功能。 二、下拉列表(Combobox...

    jquery-easyui-1.3.2easyui

    - **Combobox**:下拉菜单组件结合了输入框和下拉列表,方便用户从预定义的选项中选择,也可进行模糊搜索。 - **Datebox**:日期选择器组件提供日历控件,使用户能方便地选择日期,支持日期格式化和范围限制。 **...

    EasyUI学习之Combobox级联下拉列表(2)

    本文实例为大家分享了EasyUI Combobox级联下拉列表的具体代码,供大家参考,具体内容如下 1. html代码 信息查询 学校: &lt;input class="easyui-combobox" type="text" id="School" /&gt; 院系: &lt;...

    ComboBox 控件隐藏 fieldLabel 不能隐藏问题解决

    ComboBox是一个常用的UI组件,通常用于提供下拉选择列表,而fieldLabel是与之相关的标签,用于显示提示信息。在某些设计中,我们可能希望fieldLabel不显示,以达到更简洁的界面效果。 在描述中提到的博客文章...

    easyui中文帮助文档

    `easyui-combobox` 是一个组合输入框和下拉列表的组件,用户可以在输入框中输入文本,也可以从下拉列表中选择一个值。 12. **easyui-combotree (组合树形框)** `easyui-combotree` 将下拉列表扩展为树形结构,...

    easyui的datagrid中editor和combobox的级联

    - 设置`combobox`的相关属性,例如`valueField`、`textField`等,这些属性分别表示下拉列表项的值字段和文本字段。 - 通过`url`属性指定获取省份数据的接口地址。 - 使用`onChange`事件监听省份的选择变化。 ``...

    jquery-easyui-1.3.4.rar

    - 表单处理:表单组件如复选框(checkbox)、单选按钮(radio)、下拉列表(combobox)等,简化表单元素的创建和验证。 - 导航:菜单(menu)、导航条(navbar)、树形结构(tree)等,帮助用户在应用中导航。 - ...

    jquery-easyui-1.3.2

    这些组件包括但不限于:数据表格(datagrid)、对话框(dialog)、菜单(menu)、按钮(button)、表单(form)、树形视图(tree)、下拉树(combotree)、下拉列表(combobox)等。这些组件不仅在外观上美观,而且...

Global site tag (gtag.js) - Google Analytics