如何在下拉菜单中实现单选检查标记（✓）的动态切换

心靈之曲 2026-01-05 00:00:00 次阅读

本文讲解如何通过 javascript 动态管理下拉选项中的勾选状态：默认首个选项带 ✓，点击任一选项时仅该选项显示检查标记，其余自动移除，避免多选残留。

要实现“仅当前选中项显示 ✓、其余自动清除”的交互效果，核心在于统一管理所有选项的 checked 类状态，而非为每个元素单独绑定重复逻辑。原始代码存在多个关键问题：

event.target.classList.add('checked').innerText 语法错误（add() 返回 undefined，无法链式调用 innerText）；
未在初始化时为首个选项添加 .checked 类；
点击事件监听逻辑嵌套混乱，forEach 中重复绑定 click 会导致多次监听，引发状态错乱。

✅ 正确做法如下：

1. 初始化默认选中状态

在 HTML 加载后，为第一个元素添加 .checked 类（推荐在 DOM 加载完成后执行）：

2. 优化点击处理逻辑

移除冗余的嵌套监听，只在 #myDropdownCity a 点击时集中处理状态：

window.addEventListener('click', function(event) {
  const target = event.target;
  // 仅响应下拉菜单内的链接点击
  if (target.matches('#myDropdownCity a')) {
    event.preventDefault(); // 防止跳转锚点

    // 关闭下拉框
    document.getElementById("myDropdownCity").classList.remove("showCity");

    // 更新按钮文本
    const btn = document.querySelector('.dropbtnCity');
    btn.textContent = target.textContent;

    // 清除所有选项的 checked 类，仅为目标项添加
    const allOptions = document.querySelectorAll('#myDropdownCity a');
    allOptions.forEach(opt => opt.classList.remove('checked'));
    target.classList.add('checked');
  }
});

3. CSS 检查标记样式（保持不变，但建议增强可访问性）

.checked::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: #2E7D32;
}