ajax联动

本文介绍如何使用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函数加载学院和系信息,然后赋值





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值