如何使用JavaScript从文本文件填充HTML下拉菜单？

嘿，我明白你被这个问题卡了好一阵了！原生的<select>其实本身并不支持带复选框的<option>，不过咱们可以分两步来解决：先搞定optgroup和选项的填充，再用自定义组件实现带复选框的下拉效果。下面一步步来：

如果只是需要分组的下拉选项（不需要复选框），咱们可以直接用JS动态生成optgroup和option元素，代码如下：

HTML结构 #

<!-- 原生select，设置size让选项可见，也可以用默认下拉样式 -->
<select id="groupedSelect" size="6"></select>

JS填充逻辑（假设已导入文本数据） #

假设你从文本文件导入的数据结构是类似这样的数组（如果你的数据格式不同，只需要调整遍历逻辑即可）：

// 示例数据，替换成你从文本文件导入的实际数据
const selectGroups = [
  {
    groupTitle: "办公软件",
    items: ["Word", "Excel", "PowerPoint"]
  },
  {
    groupTitle: "开发工具",
    items: ["VS Code", "WebStorm", "Git"]
  }
];

// 获取select元素
const selectElement = document.getElementById('groupedSelect');

// 遍历分组数据，生成optgroup和option
selectGroups.forEach(group => {
  // 创建optgroup元素并设置分组标题
  const optGroup = document.createElement('optgroup');
  optGroup.label = group.groupTitle;
  
  // 为当前分组创建所有option
  group.items.forEach(itemText => {
    const option = document.createElement('option');
    option.textContent = itemText;
    // 可以给option设置value属性，方便后续获取选中值
    option.value = itemText.toLowerCase().replace(/\s+/g, '-');
    optGroup.appendChild(option);
  });
  
  // 将分组添加到select中
  selectElement.appendChild(optGroup);
});

因为原生select不支持复选框，所以咱们得用HTML+CSS+JS模拟一个下拉组件，实现分组+复选框的效果：

HTML结构 #

<!-- 自定义下拉容器 -->
<div class="checkbox-dropdown">
  <div class="dropdown-trigger">点击选择选项</div>
  <div class="dropdown-menu">
    <!-- 这里会用JS动态填充分组和带复选框的选项 -->
  </div>
</div>

CSS样式（让组件看起来像下拉） #

.checkbox-dropdown {
  position: relative;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: sans-serif;
}

.dropdown-trigger {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dropdown-trigger::after {
  content: "▼";
  font-size: 12px;
  margin-left: 8px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ddd;
  border-top: none;
  background-color: #fff;
  max-height: 250px;
  overflow-y: auto;
  display: none;
}

.checkbox-dropdown.open .dropdown-menu {
  display: block;
}

.group-title {
  padding: 8px 12px;
  font-weight: 600;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
}

.checkbox-option {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-option:hover {
  background-color: #f0f0f0;
}

.checkbox-option input {
  margin-right: 8px;
}

JS填充与交互逻辑 #

// 同样使用之前的分组数据，替换成你的实际数据
const selectGroups = [
  {
    groupTitle: "办公软件",
    items: ["Word", "Excel", "PowerPoint"]
  },
  {
    groupTitle: "开发工具",
    items: ["VS Code", "WebStorm", "Git"]
  }
];

const dropdown = document.querySelector('.checkbox-dropdown');
const trigger = dropdown.querySelector('.dropdown-trigger');
const menu = dropdown.querySelector('.dropdown-menu');

// 动态填充分组和带复选框的选项
selectGroups.forEach(group => {
  // 创建分组标题
  const groupEl = document.createElement('div');
  groupEl.className = 'group-title';
  groupEl.textContent = group.groupTitle;
  menu.appendChild(groupEl);
  
  // 创建每个带复选框的选项
  group.items.forEach(item => {
    const optionEl = document.createElement('div');
    optionEl.className = 'checkbox-option';
    
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = `option-${item}`;
    checkbox.value = item;
    
    const label = document.createElement('label');
    label.htmlFor = `option-${item}`;
    label.textContent = item;
    
    optionEl.appendChild(checkbox);
    optionEl.appendChild(label);
    menu.appendChild(optionEl);
  });
});

// 下拉展开/收起逻辑
trigger.addEventListener('click', () => {
  dropdown.classList.toggle('open');
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!dropdown.contains(e.target)) {
    dropdown.classList.remove('open');
  }
});

// 可选：获取所有选中的选项
function getCheckedOptions() {
  const checkedBoxes = menu.querySelectorAll('input[type="checkbox"]:checked');
  return Array.from(checkedBoxes).map(box => box.value);
}

这样就能实现你想要的带分组和复选框的下拉效果啦！你只需要把示例里的selectGroups替换成你从文本文件导入的实际数据即可。

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