下拉框三级联动，当回传的是json数据时的处理

最新推荐文章于 2023-07-13 11:13:35 发布

原创最新推荐文章于 2023-07-13 11:13:35 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#下拉框 #联动 #json

JavaWeb 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在下拉框实现三级联动时，如何处理后台回传的JSON数据。在编辑页面中，面临两种情况：一是初始化时已有provinceId，二是动态获取数据。在第二种情况下，页面不刷新，需要通过额外的Ajax请求来更新并渲染省市区信息。文中详细阐述了在不同情况下的代码实现，包括三个Ajax请求的使用。

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

1、点击编辑按钮，进来一个页面，后台有直接传过来user.provinceId，并且在ajax、页面初始化中，数据添加完成并且渲染成功。
2、当进入编辑页面以后，填写某个东西，根据a路径去后台调用，并回传一个json字符串，希望注册地被渲染，且显示数据相应的省市区。这时页面不会全部刷新，这个插件不会初始化。有数据也没反应。只能在该a路径下回传成功后，自己写ajax请求，自己去后台调用。

第一种情况

 <td colspan="2">
	<label class="control-label x140"><span class="red">*</span>注册地：</label>
	     <select name="provinceId" id="provinceId" data-val="${user.provinceId }" data-toggle="selectpicker" data-nextselect="#cityId" data-refurl="<%=request.getContextPath()%>/systype/city.do?proId={value}"   data-autoClose="true">
	         <option value="0">--省市--</option>
	     </select>
	     <select name="cityId" id="cityId" data-toggle="selectpicker" data-val="${user.cityId } " data-nextselect="#disId" data-refurl="<%=request.getContextPath()%>/systype/district.do?cityId={value}" data-emptytxt="--城市--" data-rule="integer[+]"  data-autoClose="true">
	         <option value="0">--城市--</option>
	     </select>
	     <select name="disId" id="disId" data-toggle="selectpicker" data-val="${user.disId }" data-emptytxt="--区县--" data-rule="integer[+]"  data-autoClose="true">
	         <option value="0">--区县--</option>
	     </select>
</td>

$.ajax({
	url: '<%=request.getContextPath()%>/systype/province.do',
	type: 'get',
	cache: 'false',
	dataType: 'json',
	success: function(data) {
		var array = ['<option value="0">--省市--</option>'];
		var dbProvinceId = 0;
		<c:if test="${user.provinceId!=null}">
		dbProvinceId = ${user.provinceId};
		</c:if>
		for(var i=0; i<data.length; i++) {
			var selected = "";
			if(dbProvinceId == data[i].proId) {
				selected = "selected";
			}
			array.push('<option value="'+data[i].proId+'" '+selected+'>'+data[i].proName+'</option>');
		}
		$("#provinceId").html(array.join("")).selectpicker('refresh');
	}
});

第二种情况

在第一种情况的代码基础上。

//根据公司名称、统一信用代码去查询，回传回来内容
function companySearchCodeAndName(){
	if($("#companyName").val() == '')
		return;
	$.ajax({
		url: "<%=request.getContextPath()%>/myUser/companySearchCodeAndName.do",
		type: 'post',
		data: "companyName="+$("#companyName").val()+"&companyOrgCode="+$("#companyOrgCode").val(),
		cache: 'false',
		async: 'false',
		success: function(data) {
			if(data[0] != undefined) {
				alert(data[0].ucUserPubinfoPo.id);
				var up = data[0].ucUserPubinfoPo;
				$("#provinceId").val(up.provinceId);
				$("#provinceId").selectpicker('refresh');
				$.ajax({
					url: '<%=request.getContextPath()%>/systype/city.do?proId='+up.provinceId,
					type: 'get',
					cache: 'false',
					dataType: 'json',
					success: function(data) {
						var array = ['<option value="0">--城市--</option>'];
						for(var i=1; i<data.length; i++) {
							var selected = "";
							if(data[i].value == up.cityId) {
								selected = "selected";
							}
							array.push('<option value="'+data[i].value+'" '+selected+'>'+data[i].label+'</option>');
						}
						$("#cityId").html(array.join("")).selectpicker('refresh');
					}
				});
				$.ajax({
					url: '<%=request.getContextPath()%>/systype/district.do?cityId='+up.cityId,
					type: 'get',
					cache: 'false',
					dataType: 'json',
					success: function(data) {
						var array = ['<option value="0">--区县--</option>'];
						for(var i=1; i<data.length; i++) {
							var selected = "";
							if(data[i].value == up.disId) {
								selected = "selected";
							}
							array.push('<option value="'+data[i].value+'" '+selected+'>'+data[i].label+'</option>');
						}
						$("#disId").html(array.join("")).selectpicker('refresh');
					}
				});
				
			}
		}
	});
}

后台数据返回，所以上面的jquery成功后的回调写data[0].ucUserPubinfoPo
第一个ajax

public JSONArray companySearch(Map<String, Object> map) {
		List<UcUserPubinfoPo> list = userService.getUsersPubinfos(map);
		JSONArray array = new JSONArray(list.size());
		for(UcUserPubinfoPo o : list) {
			JSONObject json = new JSONObject();
			json.put("value", o.getCompanyOrgCode());
			json.put("name", o.getCompanyName());
			json.put("label", o.getCompanyOrgCode()+"\t"+o.getCompanyName());
			json.put("ucUserPubinfoPo", o);
			array.add(json);
		}
		return array;
	}

第二个ajax

@RequestMapping("city")
	@ResponseBody
	public Object getSystypeCitys(@RequestParam Integer proId) {
		JSONArray json = new JSONArray();
		if (Objects.nonNull(proId)) {
			List<SysareaCityPo> list = systypeService.getSystypeCitys(proId);
			for (int i=0; i<list.size(); i++) {
				JSONObject obj = new JSONObject();
				obj.put("value", list.get(i).getCityId());
				obj.put("label", list.get(i).getCityName());
				json.add(obj);
			}
		}
		JSONObject obj = new JSONObject();
		obj.put("value", "");
		obj.put("label", "--城市--");
		json.add(0, obj);
		return json;
	}

第三个ajax

@RequestMapping("district")
	@ResponseBody
	public Object getSystypeDistricts(@RequestParam Integer cityId) {
		JSONArray json = new JSONArray();
		if(Objects.nonNull(cityId)) {
			List<SysareaDistrictPo> list = systypeService.getSystypeDistricts(cityId);
			for(int i=0; i<list.size(); i++) {
				JSONObject obj = new JSONObject();
				obj.put("value", list.get(i).getDisId());
				obj.put("label", list.get(i).getDisName());
				json.add(obj);
			}
		}
		JSONObject obj = new JSONObject();
		obj.put("value", "");
		obj.put("label", "--区县--");
		json.add(0, obj);
		return json;
	}