list集合通过ajax 在页面显示 、 以及省市级联查询

1. 后台list集合,页面显示以及级联查询
2.实现思路,进入页面前先查询所有的省份,在页面初始化时追加到select 下拉选框中,当点击省份值触发onchange事件,通过ajax 查询市,追加到市 的select 中
3. 
	<div class="div2">
		<span class="">二级机构</span>
		<select name="erji" onchange="changeProvince();" id="erji" style="width: 143px; height: 23px">
			<option value="00">全部</option>
		</select>
	</div>
	


	<div class="div2">
		<span class="">三级机构</span>  
		<select name="sanji" id="sanji" style="width: 143px; height: 23px">  </select>
	</div>






//初始化
$(function() {
	function getProvince() {
		//绑定二级机构
		$("#erji").append('<c:forEach items="${listTwo }" var="listTwo">'
					+ '<option  value="${listTwo.id }">${listTwo.name }</option>'
					+ '</c:forEach>');
	}


});


//根据二级机构获取三级机构
	function changeProvince() {
		var erji = $("#erji").val();
		$.ajax({
			type : "POST",
			data : {
				"erji" : erji,
			},
			dataType : "json",
			url : "jigou",
			success : function(data) {
				$("#sanji option").remove();
				$("#sanji").append("<option value='00'>" + '全部' + "</option>");
				两种循环后台list集和方式


				第一种循环追加方式
				$.each(data, function(name, value) {
					$("#sanji").append(
							"<option value="+value.id+">" + value.name
									+ "</option>");
				});
				第二种循环追加方式
				for(var n in data.lists){
					$("#sanji").append(
							"<option value="+data.lists[n].id+">" + data.lists[n].name
									+ "</option>");
				  }
			}


		})


	}




4.ajax  集和、对象、基本类型的获取


	@RequestMapping(value = "/sendresultlists")
	public @ResponseBody String sendresultlists(Model model, HttpServletRequest request, String status,Integer offset,Integer pageCount) {
		




		省略查询过程




		List<xx>  newList=xxxxxxx;
		User user=xxxxxx;  //对象
		int  size=xxxxxx;  
		若返回的不止list集和,还有其他的对象,基本类型,可以这样传值
		Map res=new HashMap();
		res.put("lists",newList);
		res.put("user",user);
		res.put("size",size);
		
		return JSONObject.toJSONString(res);
	}




		$.ajax({
				type : "POST",
				data : {
					"erji" : erji,
					"sanji" : sanji,
					"repairname" : repairname,
					"repaircode" : repaircode,
					"coopstatus" : coopstatus,
					"repairtype" : repairtype,
					"offset":offset,
					"pageCount":pageCount
				},
				dataType : "json",
				url : "repairfactorybycondition",
				async : true,
				success : function(data) {
					
					 //获取后台传过来的size 值
					$("#sanji").append(data.size); 
					
					for(var v in data.list){
						//获取对象值
						var pinpai;
					 	for(var p in data.lists[v].user){
					 		pinpai+='<option selected value=""> '+data.lists[v].user.name+'</option>'
						} 
						//获取集和值
						$("#sanji").append(
								"<option value="+data.lists[n].id+">" + data.lists[n].name
										+ "</option>");
						 }
			
					}
				}
			})

猜你喜欢

转载自blog.csdn.net/panshoujia/article/details/78732164