点击按钮获取学生记录后，如何保留表格输入字段的选中值

我之前也碰到过类似的情况，大概率是你在获取记录的过程中，要么不小心触发了页面刷新，要么是操作后没有把用户的选中状态保留下来。咱们先看看你的现有代码，再一步步解决：

你的现有代码 #

JavaScript 部分 #

<script>
function post()
{
	if(document.getElementById("stdName").value == "select"){
		alert("select a student name")
		return false;
	}
}
</script>

HTML 部分 #

<table>
<tr>
<th>id</th>
<th>name</th>
</tr>
<tr>
<td><input type="text" id="id1" name="id1"></td>
<td><select id="stdName" name="stdName">
	<option>select</option>
	<option>a</option>
	<option>b</option>
	<option>c</option>
  </select>
</td>
</tr>
</table>
<button id="prerec" onclick="return post()">GetRecord</button>

问题原因分析 #

出现选中值消失的情况，常见的原因有两个：

1. 页面被意外刷新：如果你的按钮放在<form>标签里，浏览器会默认把它识别为提交按钮，点击后会触发表单提交，导致页面刷新，所有表单状态都会丢失；
2. 获取记录的逻辑重置了DOM：如果你的获取记录操作是重新渲染了下拉框或者页面的部分区域，之前的选中状态会被覆盖。

解决方案 #

方案1：阻止页面意外刷新（如果用了form） #

如果你的按钮是放在<form>标签内部的，一定要给按钮加上type="button"，明确告诉浏览器这不是提交按钮：

<button type="button" id="prerec" onclick="return post()">GetRecord</button>

方案2：手动保存并恢复选中状态 #

不管你是用同步还是异步方式获取记录，都可以在操作前后保存并恢复下拉框的选中值，确保状态不会丢失。修改你的JavaScript代码如下：

<script>
function post() {
    // 第一步：先保存当前用户选中的值
    const selectedStudent = document.getElementById("stdName").value;

    if(selectedStudent == "select"){
        alert("select a student name");
        return false;
    }

    // 第二步：执行你的获取记录逻辑（这里用异步请求举例子，你可以换成自己的代码）
    // 比如发送AJAX请求获取历史记录
    fetch('/your-api-url', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({studentName: selectedStudent})
    })
    .then(response => response.json())
    .then(data => {
        // 这里处理返回的历史记录，比如渲染到页面上
        console.log("获取到的记录：", data);
        // 第三步：操作完成后，把选中值重新设置回去
        document.getElementById("stdName").value = selectedStudent;
    })
    .catch(error => {
        console.error("获取记录出错：", error);
        // 即使出错，也要恢复选中状态
        document.getElementById("stdName").value = selectedStudent;
    });

    // 如果你的获取记录是同步逻辑，直接在最后加这行就行
    // document.getElementById("stdName").value = selectedStudent;

    return false;
}
</script>

核心思路 #

核心就是先存后设：在执行任何可能改变页面状态的操作前，把用户的选择保存到变量里，等所有操作完成后，再把这个值重新赋给下拉框，这样不管中间有没有DOM变动，都能保留用户的选中状态。

如果你的获取记录逻辑是通过刷新页面来展示结果（比如传统的表单提交），那我建议改成异步请求（比如上面的fetch示例）来局部更新页面，这样完全不会丢失任何表单状态，用户体验也更好。

内容的提问来源于stack exchange，提问作者Lmnop