如何在下拉菜单中实现单选检查标记（✓）的动态切换-html教程-PHP中文网

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

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

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

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

✅ 正确做法如下：

1. 初始化默认选中状态

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

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

<!-- 在页面底部或 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;
}