如何实现提交后下拉列表保持显示选中选项？

嘿，我来帮你搞定这个问题！你遇到的核心问题应该是表单提交后页面刷新，导致下拉列表又回到初始状态了对吧？别担心，这里有两种实用的解决方案，你可以根据自己的需求来选：

如果你的Submit按钮只是用来触发前端逻辑，不需要真的把表单数据提交到后端，那直接阻止表单的默认提交动作就可以了——这样页面不会刷新，选中的选项自然会保留在下拉列表里。

<form name="bldg_form" id="bldgForm">
  <select name="building" id="buildingSelect">
    <option value="building1">Building 1</option>
    <option value="building2">Building 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('bldgForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();
  
  // 这里可以添加你需要的其他前端逻辑，比如获取选中值做处理
  const selectedValue = document.getElementById('buildingSelect').value;
  console.log('你选中的建筑是:', selectedValue);
});
</script>

如果你的表单确实需要提交到服务器，页面不可避免会刷新，那可以把选中的选项值存在浏览器的本地存储里，页面重新加载时再读取这个值，把下拉列表恢复到之前的选中状态。

<form name="bldg_form" id="bldgForm">
  <select name="building" id="buildingSelect">
    <option value="building1">Building 1</option>
    <option value="building2">Building 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

<script>
// 页面加载完成后，读取本地存储里的选中值，恢复下拉列表状态
document.addEventListener('DOMContentLoaded', function() {
  const savedValue = localStorage.getItem('selectedBuilding');
  if (savedValue) {
    document.getElementById('buildingSelect').value = savedValue;
  }
});

// 表单提交前，先把当前选中的值存入本地存储
document.getElementById('bldgForm').addEventListener('submit', function() {
  const selectedValue = document.getElementById('buildingSelect').value;
  localStorage.setItem('selectedBuilding', selectedValue);
  
  // 如果你不需要提交表单到服务器，就加上下面这行阻止默认提交
  // e.preventDefault();
});
</script>

简单解释下方案2的逻辑：每次提交表单时，我们把选中的建筑值存在浏览器的localStorage里；等页面刷新重新加载后，再从localStorage里取出这个值，设置回下拉列表，这样就能保持之前的选中状态了。

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