HTML：浏览器返回后选中Yes，隐藏元素未显示的解决方法

这个问题我之前也碰到过，核心原因很简单：浏览器返回页面时会自动恢复表单控件的选中状态，但我们的代码只给下拉框绑定了onchange事件——这个事件只有用户手动修改选项的时候才会触发，页面加载完成后并不会自动执行显示/隐藏的逻辑，所以Details元素还是保持初始的隐藏状态。

修复方案 #

我们只需要在页面加载完成后，除了绑定onchange事件，再主动检查一次下拉框的当前值，执行对应的显示/隐藏操作就行。这样不管是首次打开页面，还是从提交后返回页面，都能同步元素状态。

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<script type='text/javascript'>
function onload() {
  // 把显示/隐藏逻辑抽成独立函数，方便复用
  function toggleDetails() {
    const detailsElement = document.getElementById('Details');
    if (this.value === 'Yes') {
      detailsElement.style.display = '';
    } else {
      detailsElement.style.display = 'none';
    }
  }

  const yesOrNoSelect = document.getElementById('YesOrNo');
  // 绑定下拉框的change事件
  yesOrNoSelect.onchange = toggleDetails;
  // 页面加载时主动执行一次，同步当前状态
  toggleDetails.call(yesOrNoSelect);
}
</script>
</head>
<body onload='onload()'>
<h2 >Welcome to ABC</h2>
<form action=. method='POST' enctype='multipart/form-data'>
YesOrNo?
<select id='YesOrNo' name = 'Insert' style='width: 80px;height: 25px' required>
<option value='No'>No</option>
<option value='Yes'>Yes</option>
</select>
<div id='Details' style='display:none;'>
<br><b>Some Hidden Data</b><br>
</div>
<br><br><input type='submit' name='my-form' value='Submit' style='width: 100px;height: 40px;font-weight: 700'><br>
</form>
<hr>
See you soon
</body>
</html>

关键改动说明 #

• 把显示/隐藏的逻辑封装成toggleDetails函数，避免重复写相同代码
• 绑定onchange事件后，通过toggleDetails.call(yesOrNoSelect)主动调用一次函数——用call是为了让函数内部的this指向下拉框元素，和onchange触发时的上下文保持一致
• 这样页面加载完成（包括返回后的加载）时，会自动根据下拉框的当前选中值，控制Details元素的显示状态，完美解决你的问题！

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