从导入文件动态生成下拉菜单<option>元素问题排查

先给你一套可运行的完整代码，涵盖文本处理、option创建的核心逻辑，你可以对照排查问题：

HTML结构 #

<select id="routeSelect"></select>
<pre id="contentPreview"></pre>

JavaScript代码 #

// 确保DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
  const routeSelect = document.getElementById('routeSelect');
  const previewBox = document.getElementById('contentPreview');

  fetch('route.cfg')
    .then(res => {
      if (!res.ok) throw new Error('文件加载失败');
      return res.text();
    })
    .then(rawText => {
      // 先把内容渲染到pre标签，确认获取到的文本没问题
      previewBox.textContent = rawText;
      
      // 分割每行并过滤空行，避免生成无效选项
      const lines = rawText.split('\n').filter(line => line.trim() !== '');
      
      lines.forEach(line => {
        // 提取等号前的内容，同时去除前后空格
        const optionText = line.split('=')[0]?.trim();
        // 跳过空内容的行
        if (!optionText) return;
        
        // 方式1：用createElement创建option（推荐，安全可控）
        const option = document.createElement('option');
        option.value = optionText;
        option.textContent = optionText;
        routeSelect.appendChild(option);

        // 方式2：用innerHTML拼接（如果内容确定无XSS风险可以用）
        // routeSelect.innerHTML += `<option value="${optionText}">${optionText}</option>`;
      });
    })
    .catch(err => console.error('出错了:', err));
});

排查要点 #

• DOM加载时机：如果你的JS代码写在<head>里，必须用DOMContentLoaded包裹，否则会拿不到<select>元素（此时DOM还没渲染）。
• 文本处理逻辑：打印lines和optionText到控制台，确认是否正确提取了等号前的内容——比如有些行可能没有等号，或者前后有大量空格，需要过滤。
• 跨域/文件协议限制：如果直接双击打开HTML文件（用file://协议），浏览器可能会阻止fetch请求本地文件，建议用本地服务器（比如VSCode的Live Server插件）打开项目。
• 元素获取正确性：console.log(routeSelect)看看是否为null，如果是，说明id写错或者DOM没加载完成。

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