如何将本地文本文件导入JavaScript并填充HTML下拉选择框？

我之前也踩过类似的坑，核心问题其实是浏览器的同源安全策略——直接用file://协议打开本地HTML文件时，浏览器会阻止JS读取本地其他文件，这是为了防止恶意脚本窃取本地数据。下面给你两种可行的解决方案：

方案一：让用户手动选择本地文本文件（前端安全允许的方式） #

这种方式不需要服务器，通过File API让用户主动选择文件，浏览器就会允许读取内容。

先写HTML结构：

<!-- 添加一个文件选择器，限制只选txt文件 -->
<input type="file" id="fileSelector" accept=".txt">
<!-- 你的下拉框 -->
<select name="MySelect" id="MySelect"></select>

然后是JavaScript代码：

// 监听文件选择事件
document.getElementById('fileSelector').addEventListener('change', function(e) {
  // 获取选中的文件
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 创建FileReader对象读取文件
  const reader = new FileReader();
  reader.onload = function(event) {
    // 获取文件文本内容
    const fileContent = event.target.result;
    // 假设你的文本文件每行是一个选项，分割成数组（记得过滤空行）
    const optionList = fileContent.split('\n').filter(item => item.trim() !== '');
    
    // 获取下拉框元素
    const selectBox = document.getElementById('MySelect');
    // 先清空原有选项
    selectBox.innerHTML = '';
    
    // 循环添加新选项
    optionList.forEach(optionText => {
      const option = document.createElement('option');
      option.value = optionText.trim();
      option.textContent = optionText.trim();
      selectBox.appendChild(option);
    });
  };
  // 以文本格式读取文件
  reader.readAsText(selectedFile);
});

方案二：用本地服务器加载文件（适合开发场景） #

如果你是在开发环境，想直接加载同目录下的文本文件，需要把HTML和文本文件放在HTTP服务器上运行，绕过file://的限制。

快速搭建本地服务器的方法： #

• Python 3：打开终端，进入文件所在目录，运行 python -m http.server 8000，然后在浏览器访问 http://localhost:8000
• Node.js：先全局安装http-server npm install -g http-server，然后进入文件目录运行 http-server，访问终端给出的地址（一般是http://localhost:8080）

然后用fetch API读取文本文件：

// 替换成你的文本文件名
fetch('your-options.txt')
  .then(response => {
    // 检查文件是否成功加载
    if (!response.ok) throw new Error('文件加载失败，请检查路径是否正确');
    return response.text();
  })
  .then(fileContent => {
    const optionList = fileContent.split('\n').filter(item => item.trim() !== '');
    const selectBox = document.getElementsByName('MySelect')[0];
    selectBox.innerHTML = '';
    
    optionList.forEach(optionText => {
      const option = document.createElement('option');
      option.value = optionText.trim();
      option.textContent = optionText.trim();
      selectBox.appendChild(option);
    });
  })
  .catch(error => {
    console.error('出错啦:', error);
  });

注意：如果你的文本文件格式不是每行一个选项，记得调整分割的逻辑（比如用逗号分隔的话就改成split(',')）。

内容的提问来源于stack exchange，提问作者r.for