如下图所示,要实现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函数加载学院和系信息,然后赋值