表单提交后保留Dropdown选项值失效问题求助

针对你遇到的下拉框提交后无法保留选中值的问题，从核心逻辑入手逐一排查修复：

1. 阻止表单默认提交的页面刷新 #

表单提交默认会触发页面重载，可能导致localStorage存储后立刻刷新，预填充逻辑来不及执行。在表单提交事件中先阻止默认行为：

document.getElementById('dailyContactForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止页面自动刷新
  saveSubmittedValues();
  // 这里可添加异步提交表单数据的逻辑（如fetch/ajax）
  // 提交完成后可手动提示成功或跳转
});

2. 修正saveSubmittedValues的存储逻辑 #

确保正确获取下拉框的选中值并存储：

function saveSubmittedValues() {
  const supervisorVal = document.getElementById('supervisor').value;
  const substationVal = document.getElementById('substation').value;
  localStorage.setItem('savedSupervisor', supervisorVal);
  localStorage.setItem('savedSubstation', substationVal);
}

3. 确保prefillDropdowns在DOM加载完成后执行 #

把预填充逻辑绑定到DOMContentLoaded事件，保证下拉框元素已渲染：

document.addEventListener('DOMContentLoaded', function() {
  prefillDropdowns();
});

function prefillDropdowns() {
  const savedSuper = localStorage.getItem('savedSupervisor');
  const savedSub = localStorage.getItem('savedSubstation');
  
  if (savedSuper) {
    document.getElementById('supervisor').value = savedSuper;
  }
  if (savedSub) {
    document.getElementById('substation').value = savedSub;
  }
}

4. 排查潜在细节问题 #

• 核对下拉框的id与代码中使用的是否完全一致（如supervisor、substation）
• 检查浏览器是否禁用了localStorage（控制台输入localStorage可查看状态）
• 若需正常提交表单到后端，可在存储值后手动触发提交：

document.getElementById('dailyContactForm').addEventListener('submit', function(e) {
  saveSubmittedValues();
  // 延迟确保存储完成后提交
  setTimeout(() => {
    this.submit();
  }, 100);
});

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