`

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

 

分享到:
评论

相关推荐

    ComboBox下拉框内字体加颜色

    ComboBox下拉框内字体加颜色 在COMBOBOX内重画得到的字体加颜色

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

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

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

    本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧

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

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

    jquery-easyui-EDT-1.5.5.7z

    combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标光标快速离开的时候展开的面板不会被折叠的问题; tagbox:修复tagbox框和label标签不在一条直线上的问题。 ...

    jQuery EasyUI 1.3.5 离线简体中文API文档

    combobox:允许“disabled”属性禁用下拉列表选项; tree:改进数据加载时候的性能; pagination:新增“layout”属性,用于自定义控件的样式布局; accordion:新增“unselect”方法、“onUnselect”事件; ...

    jQuery EasyUI 组件加上“清除”功能实例详解

     在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...

    easyUI下拉列表点击事件使用方法

    主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

    我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息...

    jQueryEasyUI1.4.4版API中文版(MadeByRichie696)

    combobox下拉列表用的一个js文件.

    cj_easyui_combobox_struts_velocity.docx

    完全结合最新的SSH框架,jquery jeasyui velocity等特性,进行生意下拉列表的实现,避免了复杂性的SELECT OPTIONS等代码编写

    基于MVC4+EasyUI的Web开发框架形成之旅

    我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息...

    jQuery EasyUI 1.5 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    combobox:添加“limitToList”属性来限制只能输入在列表项中的内容; combogrid:允许用户快速克隆组件; form:添加“dirty”属性,允许用户只发送变更的字段内容; form:添加“resetDirty”方法; datagrid...

    为Jquery EasyUI 组件加上清除功能的方法(详解)

    在使用 EasyUI 各表单组件时,尤其是使用 ComboBox(下拉列表框)、DateBox(日期输入框)、DateTimeBox(日期时间输入框)这三个组件时,经常有这样的需求,下拉框或日期只允许选择、不允许手动输入,这时只要在...

    jQuery Easyui 下拉树组件combotree

    jQuery EasyUI 组合树(ComboTree) 和组合框的用法差不多,只是在显示上有点差别:一个显示成树状结构,一个显示成列表结构。 项目中做角色授权时,需要做一个下拉框带树结构的 并且可以多选的组件,就想到了easyui的...

Global site tag (gtag.js) - Google Analytics