页面重载后保持下拉菜单选中选项可见的实现方法

• 下拉状态丢失：location.reload() 会将页面重置为初始加载状态，表单控件默认会回到HTML初始值，没有对选中状态做持久化存储的话，重载后自然无法保留上次选择。
• reloadButton is not defined 报错：是因为你在绑定重载点击事件时，要么获取reloadButton元素的代码执行时机早于DOM渲染，要么变量作用域错误，导致事件触发时找不到对应变量。控制台出现的https://stacksnippets.net/js是Stack Overflow代码片段的沙箱运行环境域名，属于平台内置的运行上下文标识，不是你本地代码的问题；沙箱环境中执行重载会清空沙箱临时上下文，所以会出现页面空白，本地部署运行不会触发该问题。

通过localStorage持久化存储下拉菜单的选中值，页面重载后自动读取存储值恢复选中状态并加载对应音频；同时调整DOM操作的执行时机，修复变量未定义的报错。

完整可运行代码示例：

<select id="audioSelect">
  <option value="">请选择音频</option>
  <option value="track1">轨道1</option>
  <option value="track2">轨道2</option>
  <option value="track3">轨道3</option>
</select>
<div id="controlArea"></div>

<script>
const SELECT_STORAGE_KEY = 'lastSelectedAudio';
const audioSelect = document.getElementById('audioSelect');
const controlArea = document.getElementById('controlArea');

// 等DOM完全渲染后再执行逻辑，避免找不到元素的报错
document.addEventListener('DOMContentLoaded', () => {
  // 页面加载时读取上次存储的选中值
  const lastSelected = localStorage.getItem(SELECT_STORAGE_KEY);
  if (lastSelected) {
    audioSelect.value = lastSelected;
    loadAudioFile(lastSelected);
  }

  // 监听下拉选择操作
  audioSelect.addEventListener('change', (e) => {
    const currentVal = e.target.value;
    if (currentVal) {
      localStorage.setItem(SELECT_STORAGE_KEY, currentVal);
      loadAudioFile(currentVal);
    } else {
      localStorage.removeItem(SELECT_STORAGE_KEY);
      controlArea.innerHTML = '';
    }
  });
});

// 音频加载逻辑
function loadAudioFile(trackId) {
  const audio = new Audio(`./audio/${trackId}.mp3`);

  // 音频加载成功
  audio.addEventListener('canplaythrough', () => {
    controlArea.innerHTML = `<button id="onBtn">ON</button>`;
    document.getElementById('onBtn').addEventListener('click', () => {
      audio.play();
    });
  });

  // 音频加载失败
  audio.addEventListener('error', () => {
    // 直接渲染错误提示并绑定事件，不额外声明全局reloadButton变量，避免作用域错误
    controlArea.innerHTML = `
      <div class="error-block" style="color: #f00; cursor: pointer; padding: 8px 12px; border: 1px solid #f00;">
        音频文件未找到，点击重试
      </div>
    `;
    document.querySelector('.error-block').addEventListener('click', () => {
      location.reload();
    });
  });

  audio.load();
}
</script>

• 所有DOM操作放在DOMContentLoaded事件回调中执行，确保元素已经渲染完成再获取，从根源上避免元素/变量未定义的报错。
• 选中值存储在localStorage中，无论是点击错误提示触发的重载，还是用户手动刷新页面，都会自动恢复上次选中的选项，直接加载对应音频内容，无需用户重新选择。
• 代码片段沙箱的空白问题是平台沙箱的安全限制，本地或服务器部署后不会出现该问题，无需额外处理。

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