如何用除静态option外的其他方法实现HTML字母下拉菜单？

方案1：动态生成原生select的option选项 #

不用手动手写26个option标签，通过JS批量生成，后续维护也更方便，修改字母范围只要调整循环参数即可。

代码示例 #

HTML部分：

<!-- 只需要定义空的select标签即可 -->
<select name="letter" id="letter"></select>

JS部分：

const selectEl = document.getElementById('letter');
// 遍历A-Z的字符编码，A对应ASCII码65，Z对应90
for (let i = 65; i <= 90; i++) {
  const letter = String.fromCharCode(i);
  const option = document.createElement('option');
  // value设为小写字母，显示文本设为大写，和你原有示例逻辑一致
  option.value = letter.toLowerCase();
  option.textContent = letter;
  selectEl.appendChild(option);
}

如果需要默认选中某个值，比如默认选中A，只要在创建option的时候加判断if (i === 65) option.selected = true即可。

方案2：完全自定义下拉菜单（不依赖原生select标签） #

如果需要自定义下拉的样式、交互效果，可以用普通DOM元素+原生JS实现，不受原生select的样式限制。

代码示例 #

HTML部分：

<div class="custom-select">
  <button class="select-trigger">请选择字母</button>
  <ul class="select-options" style="display: none;">
    <!-- 选项通过JS动态生成 -->
  </ul>
  <!-- 如需表单提交可加隐藏input存储值 -->
  <input type="hidden" name="letter" id="hidden_letter">
</div>

JS部分：

const trigger = document.querySelector('.select-trigger');
const optionsWrap = document.querySelector('.select-options');
const hiddenInput = document.getElementById('hidden_letter');

// 生成26个字母选项
for (let i = 65; i <= 90; i++) {
  const letter = String.fromCharCode(i);
  const li = document.createElement('li');
  li.dataset.value = letter.toLowerCase();
  li.textContent = letter;
  // 点击选项赋值
  li.addEventListener('click', () => {
    trigger.textContent = letter;
    hiddenInput.value = li.dataset.value;
    optionsWrap.style.display = 'none';
  });
  optionsWrap.appendChild(li);
}

// 控制下拉展开收起
trigger.addEventListener('click', (e) => {
  e.stopPropagation();
  optionsWrap.style.display = optionsWrap.style.display === 'none' ? 'block' : 'none';
});

// 点击页面其他区域收起下拉
document.addEventListener('click', () => {
  optionsWrap.style.display = 'none';
});

你可以自行给对应元素添加CSS样式，实现和UI设计一致的下拉效果，比原生select的样式定制性高很多。

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