JQuery根据json数据选中多选框

最新推荐文章于 2024-08-27 08:30:00 发布

maoqitt

最新推荐文章于 2024-08-27 08:30:00 发布

阅读量505

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： jquery split字符串并选中多选框 ViewUI

本文链接：https://blog.youkuaiyun.com/tracytingting/article/details/84711164

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript处理前后端仓库数据交互的过程。前端通过获取指定格式的字符串数据，并利用jQuery和JSON请求从后端获取仓库信息，实现动态生成复选框列表的功能。同时，文章还展示了如何在Java后台处理这些数据并返回给前端。

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

<dl class="nowrap">
		<dt>输出仓库：</dt>
		<dd><div id="ufrom_ids" val="${from_ids}"></div></dd>
</dl>
<dl class="nowrap">
		<dt>输入仓库：</dt>
		<dd><div id="uto_ids" val="${to_ids}" ></div></dd>
</dl>

ufrom_ids和 uto_ids 获得数据格式是字符串，eg：string ufrom_ids=“3,4,35”；

页面请求在Java后台获取所有的数据 var iaxleft= intArray[n].replace( /^\s+|\s+$/g, "" );处理空格和特殊字符

<script language="JavaScript">
<!--
$(document).ready(function() {
	$.getJSON("deliver/getWarehouses.do", function(data){
			var html = '';
			var htmlto='';
			var from_ids = $("#ufrom_ids").attr('val');
			var to_ids = $("#uto_ids").attr('val');

			var intArray = new Array();
			intArray=from_ids.split(',');
			
			var tointArray = new Array();
			tointArray=to_ids.split(',');
				
		$.each(data, function(i,item){
			
			html += '<label><input type="checkbox" name="from_ids"  value="' + item.value+'"' ;

			for(var n=0;n<intArray.length;n++){
			
				var  iaxleft= intArray[n].replace( /^\s+|\s+$/g, "" );
				var  iaxright= item.value.replace( /^\s+|\s+$/g, "" );
				if(iaxleft==iaxright)
					html += ' checked';
			}
			html +='>' +item.text + '</label>';
			
			htmlto += '<label><input type="checkbox" name="to_ids"  value="' + item.value+'"' ;
			
			for(var ton=0;ton<tointArray.length;ton++){
			
				var  toiaxleft= tointArray[ton].replace( /^\s+|\s+$/g, "" );
				var  toiaxright= item.value.replace( /^\s+|\s+$/g, "" );
				if(toiaxleft==toiaxright)
					htmlto += ' checked';
			}
			htmlto +='>' +item.text + '</label>';	
		});
		
		$("#ufrom_ids").append(html);
		$("#uto_ids").append(htmlto);
	});
});
//-->
</script>

后台请求路径

<action name="getWarehouses" class="mgmt.deliver.WarehouseEditAction"  method="getWarehouses">
			<param name="opType">JSON</param>
			<result type="plainText"/>
		</action>

action内容 WarehouseEditAction.java

public String getWarehouses() {
		BeanFactory.getService(Const.SERVICE_MGMT_DELIVER_WAREHOUSE_EDIT, this.vo);
//Const.SERVICE_MGMT_DELIVER_WAREHOUSE_EDIT service的路径 sql语句获取所有的仓库信息
		Gson gson = new Gson();
		String json = gson.toJson(this.vo.getGetWarehouse());
		this.printJson(json);
		return null;
	}