jquery ajax决定下拉菜单，以及下拉菜单级联

最新推荐文章于 2022-03-12 08:00:00 发布

原创最新推荐文章于 2022-03-12 08:00:00 发布 · 755 阅读

3 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

12 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

ajax

2 篇文章

订阅专栏

本文介绍了如何在HTML页面加载完成后，利用jQuery AJAX动态加载父级下拉菜单，并根据父级选择值，通过AJAX获取子级下拉菜单的内容。在JavaScript中，通过JSON.parse()方法解析服务器返回的文本数据。后端使用Java处理请求，返回JSON数组格式的数据。

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

html

后台java

html

<select class="form-control" id="father" name="father" style="width:130px">
	<option value="-1">全部</option>											 	
</select>
<select class="form-control" id="son" name="son" style="width:130px">
	<option value="-1">全部</option>											 	
</select>

操作是html页面加载完成，ajax加载father的下拉菜单，如果页面已经确定father的值了，就根据father，ajax加载son的下拉菜单。

不然也可以在father菜单改变后，根据father的值，ajax加载son的下拉菜单

js

ajax返回的是text类型， JSON.parse() 方法将text转换为 JavaScript 对象。

//页面载入时执行
$(function() {
	
	//加载老爸
	initFather(father)
	//加载儿子
	initSon(father,son)
	
});

//加载老爸
function initFather(father){

	$.ajax({
		url : path+"/searchFatherList.do?",
		type : 'post',
		async: false,
		success : function(data) {
			if(data=="error"){
				alert("系统错误");
				return;
			}
			dataJson=JSON.parse(data);
			var options = "<option value='-1'>全部</option>";
			for(var i in dataJson){
				if(father && father == dataJson[i].Father_CODE ){
					options += "<option value='" + dataJson[i].Father_CODE + "' selected>" + dataJson[i].Father_NAME+"</option>";
				}else{
					options += "<option value='" + dataJson[i].Father_CODE + "' >" + dataJson[i].Father_NAME+"</option>";
				}
				
			}
			$("#father").html(options);
		},
		error : function(data) {
			html = "<option value='-1'>全部</option>";
		}
	});

	return true;
}

//老爸改变时级联儿子
$("#father").change(function(){
	FatherId=$("#father").val();
	initSon(FatherId,'-1');
});

//加载儿子
function initSon(FatherId,son){

	$.ajax({
		url : path+"/=searchSonList.do?FatherId="+FatherId,
		type : 'post',
		async: false,
		success : function(data) {
			if(data=="error"){
				alert("系统错误");
				return;
			}
			dataJson=JSON.parse(data);
			var options = "<option value='-1'>全部</option>";
			for(var i in dataJson){
				if(son && son == dataJson[i].Son_NO ){
					options += "<option value='" + dataJson[i].Son_NO + "' selected>" + dataJson[i].Son_NAME+"</option>";
				}else{
					options += "<option value='" + dataJson[i].Son_NO + "' >" + dataJson[i].Son_NAME+"</option>";
				}
				
			}
			$("#son").html(options);
		},
		error : function(data) {
			html = "<option value='-1'>全部</option>";
		}
	});

	return true;
}

后台java

转为jsonarray的字符串

	/**
	 * 儿子列表
	 * @param request
	 * @return
	 * 
	 */
	@ResponseBody
	@RequestMapping(value = "/searchSonList")
	public String searchSonList(HttpServletRequest request,String fatherId) {
		try{			
			List<Map<String, Object>> result=service.searchCallNumOpList(fatherId);
			//内容为
			Map<String, Object> now=new HashMap();
			now.put("Son_NO","12345");
			now.put("Son_NAME","abc");
			result.add(now);
			//转为jsonarray的字符串
			return JSONArray.fromObject(result).toString;			
		}catch(Exception e){
			logger.error(e.getMessage(), e);
			return "error";
		}
	}