表单提交后如何阻止select标签重置为默认选项？

实现思路 #

表单默认同步提交后会刷新页面，DOM状态会完全重置回到初始状态，所以需要提前把select的选中值存到本地存储中，页面重新加载后读取存储值恢复选中状态即可，不需要调用preventDefault()影响正常提交逻辑。

原生JavaScript实现 #

document.addEventListener('DOMContentLoaded', function() {
  const selectDom = document.getElementById('select-option');
  // 页面加载时读取已保存的选中值
  const savedValue = localStorage.getItem('select_saved_value');
  if (savedValue) {
    selectDom.value = savedValue;
  }
  // 选中值变化时更新存储
  selectDom.addEventListener('change', function() {
    localStorage.setItem('select_saved_value', this.value);
  });
  // 可选：提交后不需要保留选中值就放开下面的注释
  // document.getElementById('myform').addEventListener('submit', function() {
  //   localStorage.removeItem('select_saved_value');
  // })
})

jQuery实现 #

$(function() {
  const $select = $('#select-option');
  // 页面加载时恢复选中值
  const savedValue = localStorage.getItem('select_saved_value');
  if (savedValue) {
    $select.val(savedValue);
  }
  // 选中值变化时存储
  $select.on('change', function() {
    localStorage.setItem('select_saved_value', $(this).val());
  });
  // 可选：提交后清除存储
  // $('#myform').on('submit', function() {
  //   localStorage.removeItem('select_saved_value');
  // })
})

补充说明 #

• 如果需要关闭浏览器就清空保存的选中值，可以把localStorage替换为sessionStorage，使用逻辑完全一致。
• 如果你的表单是异步提交无刷新场景，出现选中值重置大概率是代码中手动调用了form.reset()方法，删除对应重置逻辑即可，不需要额外加存储代码。
• 支持服务端渲染的场景也可以直接在后端渲染页面时，根据提交的参数给对应option加selected属性，实现逻辑更稳妥。

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