如何正确使用 Fetch API 动态填充下拉菜单（Dropdown）

顺亿

2026-11-04 • 👁 0人浏览过

本文详解如何通过 java script 的 `fetch()` 正确读取本地 js on 文件并动态生成 ` ` 下拉选项，解决因异步处理不当、事件重复绑定或错误捕获缺失导致的选项不显示问题。在构建基于静态文件的轻量级管理界面（如 Wi-Fi 密码更新页）时，常需从本地 JSON 文件（如 data/data. json ）动态加载选项到

// ✅ 推荐：使用 async/await + 单次事件监听
document.addEventListener('DOMContentLoaded', loadRoomNumbers);

async function loadRoomNumbers() {
  const roomSelect = document.getElementById('room');

  try {
    const response = await fetch('data/data.json');

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const roomsData = await response.json(); // ✅ 关键：await 确保解析完成

    // 清空默认提示项以外的选项（可选，提升容错性）
    roomSelect.innerHTML = '';

    roomsData.forEach(roomData => {
      const option = document.createElement('option');
      option.value = roomData.Room;
      option.textContent = roomData.Room;
      roomSelect.appendChild(option);
    });

  } catch (error) {
    console.error('❌ Failed to load room data:', error.message);
    // 可选：向用户展示友好提示
    roomSelect.innerHTML = '';
  }
}

⚠️ 注意事项与调试建议路径验证：确保 data/data.json 路径正确（区分大小写，检查服务器是否允许跨源或直接访问 .json 文件）。可在浏览器开发者工具的 Network 标签中查看请求是否返回 200 OK 及响应体是否为合法 JSON。 CORS 限制：若直接双击 HTML 文件打开（file:// 协议），现代浏览器会因安全策略阻止 fetch() 读取本地文件。务必通过本地服务器运行（如 VS Code 的 Live Server 插件、npx serve 或 Python 的 python -m http.server）。 JSON 格式校验：确认 data.json 是严格有效的 JSON（字段名需双引号包裹，无尾逗号，无注释）。 DOM 元素存在性：getElementById('room') 返回 null 时说明元素未加载或 ID 不匹配，请检查 HTML 是否已渲染且 ID 拼写一致。 ✅ 总结下拉菜单无选项的核心原因通常是： JSON 数据未成功解析为数组，或解析后未正确遍历注入 DOM 。通过统一使用 async/await、添加完整的错误处理、避免重复监听，并配合本地 HTTP 服务调试，即可稳定实现 JSON 驱动的动态表单选项。此模式同样适用于加载设备列表、楼层信息、用户配置等场景。

相关文章