本文讲解如何通过 javascript 动态管理下拉选项中的勾选状态：默认首个选项带 ✓，点击任一选项时仅该选项显示检查标记，其余自动移除，避免多选残留。
要实现“仅当前选中项显示 ✓、其余自动清除”的交互效果，核心在于统一管理所有选项的 checked 类状态，而非为每个元素单独绑定重复逻辑。原始代码存在多个关键问题：
- event.target.classList.add('checked').innerText 语法错误（add() 返回 undefined，无法链式调用 innerText）；
- 未在初始化时为首个选项添加 .checked 类；
- 点击事件监听逻辑嵌套混乱，forEach 中重复绑定 click 会导致多次监听，引发状态错乱。
✅ 正确做法如下：
1. 初始化默认选中状态
在 HTML 加载后，为第一个 元素添加 .checked 类（推荐在 DOM 加载完成后执行）：
<!-- 在页面底部或 DOMContentLoaded 中 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const firstOption = document.querySelector('#myDropdownCity a:first-child');
if (firstOption) firstOption.classList.add('checked');
// 同步按钮文字
document.querySelector('.dropbtnCity').textContent = firstOption.textContent;
});
</script>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 已就绪。
通过以上重构，即可实现专业、健壮的单选检查标记交互：默认高亮首项，点击切换时精准更新视觉反馈与按钮文案，无残留、无闪烁、无重复绑定。
