本文讲解如何通过 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; }✅ 提示：使用 margin-left 替代 flex-end + margin-top 更稳定；添加宽高与颜色提升视觉一致性。
4. 注意事项
- ❌ 避免在循环中为每个 单独绑定 click 事件（如原答案所示），这会因重复绑定导致性能下降和状态冲突；
- ✅ 使用 querySelectorAll 获取全部选项并统一操作，更高效、更可控；
- ✅ 始终调用 event.preventDefault() 防止 href=”#myDropdownCity” 触发页面跳转；
- ✅ 将初始化逻辑放在 domContentLoaded 中，确保 DOM 已就绪。
通过以上重构，即可实现专业、健壮的单选检查标记交互：默认高亮首项，点击切换时精准更新视觉反馈与按钮文案，无残留、无闪烁、无重复绑定。