本文介绍如何用纯 javascript 实现：当下拉菜单（`
在构建交互式表单或配置面板时，常需让下拉选择器与一组操作按钮保持视觉和逻辑同步——例如用户从下拉菜单中选择“3”，则 data-value="3" 的按钮应高亮；切换至“1”后，“3”按钮取消高亮，“1”按钮立即响应。这要求我们不仅添加类名，更要精准移除旧状态。
✅ 正确实现：先清除再设置
原始代码仅执行 classList.add('selected')，却未清理历史状态，导致多个按钮同时拥有 selected 类。解决方案是在每次 change 事件中，统一清除所有按钮的 selected 类，再为目标按钮重新添加：
const buttons = document.querySelectorAll(".btn-num");
const dropdown = document.querySelector('#dropdown-container .dropdown');
dropdown.addEventListener("change", function() {
// 第一步：清除所有按钮的 selected 状态
buttons.forEach(btn => btn.classList.remove('selected'));
// 第二步：为当前选中值匹配的按钮添加 selected 类
const selectedValue = this.value;
if (selectedValue) { // 忽略空值（如默认禁用选项）
const targetBtn = Array.from(buttons).find(
btn => btn.getAttribute('data-value') === selectedValue
);
if (targetBtn) targetBtn.classList.add('selected');
}
});? 优化提示：相比遍历全部按钮再比对，使用 Array.from().find() 可提前定位目标元素，提升可读性与性能（尤其在按钮数量较多时）。
⚠️ 注意事项与健壮性增强
- 空值防护：下拉菜单初始选项通常设为 value="" 并 disabled，事件触发时 this.value 为空字符串。务必用 if (selectedValue) 过滤，避免误操作。
-
避免重复移除：classList.remove() 对不存在的类无副作用，安全可靠；但若追求极致效率，也可先用 document.querySelector('.selected')?.classList.remove('selected') 仅操作当前高亮项：
// 替代方案：只移除上一个 selected 元素（更轻量） document.querySelector('.btn-num.selected')?.classList.remove('selected'); const targetBtn = document.querySelector(`.btn-num[data-value="${this.value}"]`); if (targetBtn) targetBtn.classList.add('selected'); - CSS 样式保障：确保 .btn-num.selected 样式已正确定义（如背景色、文字色），且按钮容器未阻止样式继承。
✅ 最终效果验证
当用户依次选择 “2” → “4” → “1” 时：
- 每次 change 后，有且仅有一个 .btn-num 元素拥有 selected 类；
- 视觉上仅对应数字按钮高亮，无残留或错位；
- 完全依赖原生 API，零第三方库，兼容现代浏览器。
通过这种“清空 + 精准赋值”的模式，你不仅能解决当前问题，还能将其复用于标签页切换、主题预设同步等多场景状态管理，是前端状态一致性控制的经典实践。
立即学习“Java免费学习笔记（深入）”；
