咨询：下拉列表保存后选中状态无法保留，刷新恢复默认

根据你的场景，分以下几种常见情况给出具体实现方案：

情况1：纯前端无后端交互（用本地存储持久化） #

如果只是前端页面，不需要提交到后端，点击保存后把选中值存在浏览器本地存储，页面加载时自动读取并恢复选中状态：

代码实现 #

<select id="language" name="language">
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>
<button id="saveBtn">保存</button>

<script>
// 页面加载时读取本地存储，恢复选中项
document.addEventListener('DOMContentLoaded', function() {
  const savedLang = localStorage.getItem('selectedLanguage');
  if (savedLang) {
    document.getElementById('language').value = savedLang;
  }
});

// 点击保存时存储当前选中值
document.getElementById('saveBtn').addEventListener('click', function() {
  const selectedLang = document.getElementById('language').value;
  localStorage.setItem('selectedLanguage', selectedLang);
});
</script>

情况2：表单提交到后端，页面刷新后保留状态 #

如果是表单提交到后端后页面刷新，需要让后端配合回显选中状态，或前端读取URL参数恢复：

方式A：后端渲染时设置selected属性 #

后端处理表单提交后，将选中的语言值传递回页面模板，在对应<option>上添加selected属性（以PHP为例，其他后端语言逻辑一致）：

<?php
// 获取提交的选中值，默认空字符串
$selectedLang = $_POST['language'] ?? '';
?>
<select id="language" name="language">
  <option value="" <?php echo $selectedLang === '' ? 'selected' : ''; ?>></option>
  <option value="One" <?php echo $selectedLang === 'One' ? 'selected' : ''; ?>>One</option>
  <option value="Two" <?php echo $selectedLang === 'Two' ? 'selected' : ''; ?>>Two</option>
  <option value="Three" <?php echo $selectedLang === 'Three' ? 'selected' : ''; ?>>Three</option>
</select>

方式B：前端读取URL参数回显 #

如果表单是GET提交（或后端将选中值放在URL参数中），前端可直接解析URL参数恢复选中状态：

<select id="language" name="language">
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const selectedLang = urlParams.get('language');
  if (selectedLang) {
    document.getElementById('language').value = selectedLang;
  }
});
</script>

情况3：异步提交表单（不刷新页面） #

如果用AJAX异步提交数据，页面不会刷新，下拉框的选中状态本来就会保留，只需处理提交逻辑即可：

<select id="language" name="language">
  <option value=""></option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>
<button id="saveBtn">保存</button>

<script>
document.getElementById('saveBtn').addEventListener('click', function() {
  const selectedLang = document.getElementById('language').value;
  // 异步提交数据到后端
  fetch('/save-language', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `language=${encodeURIComponent(selectedLang)}`
  })
  .then(response => response.json())
  .then(data => {
    console.log('保存成功');
    // 无需修改下拉框状态，页面未刷新，选中状态自动保留
  })
  .catch(error => {
    console.error('保存失败:', error);
  });
});
</script>

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