实现Ajax联动并保留查询条件-优快云博客

本文链接：https://blog.youkuaiyun.com/baoliangsheng/article/details/45913371

本文介绍如何使用Ajax实现实时联动效果，并确保在查询完成后仍能保留原有的选择值。涉及学院信息与系信息的数据库联动加载，通过JavaScript和jQuery实现。

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

如下图所示，要实现ajax联动，并且在点击查询完成之后仍然保持原来已选过的值，该如何做呢？

其中学院信息和系信息均为数据库中的数据。

看如下代码：

首先加载学院信息

$(function(){
		$.post("学院.do", function(data) {
				var msg = eval('(' + data + ')');
				$("#did").empty();
				var innerHtml = "<option value='请选择'>请选择</option>";
				for ( var i in msg) {
					innerHtml += "<option  id='did"+msg[i].id+"'  value="+msg[i].id+">" + msg[i].dname
						+ "</option>";
				}
				$("#did").append(innerHtml);
				
				if('条件' != null && '条件' != ''){  //条件判断
					$("#did").val('${did}'); // 查询结束后对学院信息赋值				
					findMember(); // 调用加载系信息的函数
				}
		});
	});

接下来是获取系信息函数：

function findDepartment(){
		var did = $("#did").val();
		$.post("系.do", {"did":did}, function(data) { //查询系信息
				var msg = eval('(' + data + ')');
				$("#tel").empty();
				var innerHtml = "<option value='请选择'>请选择</option>";
				for ( var i in msg) {
					innerHtml += "<option  id='tel"+msg[i].tel+"'  value="+msg[i].tel+">" + msg[i].name+"/"+msg[i].tel
						+ "</option>";
				}
				$("#tel").append(innerHtml);
				
				if('条件' != null && '条件' != ''){
					$("#tel").val('${tel}');  //  查询结束后给系赋值
				//	if('${resultTag}' == 'error'){
				//		alert("对查询结果的提示");
				//	}
				}
		});
	}

下面是部分html代码

<tr>
									<td width="12%" style="text-align:right">
										学院：
									</td>
									<td width="20%" style="text-align:left">
										<select name="did" id="did" class="txtbox" onchange="findDepartment()">
									 		<option value="请选择">请选择</option>
										</select>
									</td>
									<td width="12%" style="text-align:right">
										系：
									</td>
									<td width="20%" style="text-align:left">
										<select id="tel" name="tel" class="txtbox">
												<option value="请选择">请选择</option>
										</select>
									</td>
</tr>

注意:如果需要在查询完结果之后还需要保留查询条件的值，如果不是ajax提交，在页面重新刷新之后需要重新调用ajax函数加载学院和系信息，然后赋值