如何从文本文件导入值到JavaScript并填充HTML下拉菜单

嘿，我完全懂你的感受！搜了半天全是把下拉值传到JS的教程，反向操作的资料反而难找，这不就来帮你解决了嘛😉

下面分两种常见场景给你具体代码，你可以根据自己的需求选：

场景1：读取服务器上的文本文件（网页部署用） #

假设你有一个放在服务器上的文本文件options.txt，内容是每行一个选项：

Option 1
Option 2
Option 3
Option 4

你的HTML下拉菜单已经写好：

<select id="myDropdown"></select>

对应的JavaScript代码：

// 先拿到下拉菜单的DOM元素
const dropdown = document.getElementById('myDropdown');

// 用fetch请求文本文件
fetch('options.txt')
  .then(response => {
    // 先检查请求是否成功
    if (!response.ok) {
      throw new Error('文件加载失败，请检查路径是否正确');
    }
    return response.text(); // 把响应转成文本格式
  })
  .then(textContent => {
    // 把文本按换行分割成选项数组，同时过滤掉空行
    const optionList = textContent.split('\n').filter(item => item.trim() !== '');
    
    // 遍历数组，给下拉菜单添加每个选项
    optionList.forEach(optionText => {
      const newOption = document.createElement('option');
      // 这里可以自定义value属性，比如把文本转成小写连字符形式，也可以直接用optionText当value
      newOption.value = optionText.toLowerCase().replace(/\s+/g, '-');
      newOption.textContent = optionText; // 设置选项显示的文字
      dropdown.appendChild(newOption);
    });
  })
  .catch(error => {
    console.error('加载文件时出错：', error);
  });

场景2：读取本地电脑上的文本文件（本地测试用） #

如果你想让用户自己选择本地的文本文件来填充下拉菜单，需要加一个文件上传控件：

<input type="file" id="fileSelector" accept=".txt">
<select id="myDropdown"></select>

对应的JavaScript代码：

const fileSelector = document.getElementById('fileSelector');
const dropdown = document.getElementById('myDropdown');

// 监听文件选择事件
fileSelector.addEventListener('change', (event) => {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return; // 如果没选文件就直接返回

  // 创建FileReader对象读取本地文件
  const reader = new FileReader();
  reader.onload = (loadEvent) => {
    const textContent = loadEvent.target.result;
    const optionList = textContent.split('\n').filter(item => item.trim() !== '');
    
    dropdown.innerHTML = ''; // 先清空下拉菜单原有的选项（可选）
    optionList.forEach(optionText => {
      const newOption = document.createElement('option');
      newOption.value = optionText.toLowerCase().replace(/\s+/g, '-');
      newOption.textContent = optionText;
      dropdown.appendChild(newOption);
    });
  };
  reader.readAsText(selectedFile); // 以文本格式读取文件
});

小提示 #

• 如果你的文本文件用的是逗号、分号这类分隔符，把代码里的split('\n')改成split(',')（或者对应的分隔符）就行。
• 用fetch的时候要注意跨域问题：文本文件必须和你的HTML页面在同一个域名下，不然浏览器会阻止请求哦。
• 过滤空行的filter(item => item.trim() !== '')很重要，能避免下拉菜单里出现空的选项。

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