原生JS实现下拉框切换时移除前选中按钮的selected类

问题背景 #

有一个下拉选择框（select）和一组按钮，二者选项值一一对应。需求是：选择下拉框选项时，对应data-value的按钮添加selected类；切换下拉选项时，移除前一个选中按钮的selected类，再给新选中值对应的按钮加上该类。目前仅实现了添加类的功能，切换时无法清除旧选中按钮的类。

解决方案 #

修改JavaScript逻辑，在每次下拉选项变更时，先重置所有按钮的选中状态，再给匹配当前下拉值的按钮添加选中类即可。

完整代码 #

HTML

<div id="dropdown-container">    
    <select class="dropdown">       
        <option value="" selected="" disabled="">Numbers</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

<div class="options">
    <div class="btn-num" data-value="1">
        1
    </div>

    <div class="btn-num" data-value="2">
        2
    </div>

    <div class="btn-num" data-value="3">
        3
    </div>

    <div class="btn-num" data-value="4">
        4
    </div>
</div>

CSS

.btn-num.selected {
  background-color: green;
  color: #fff;
}

JavaScript

const btns = document.querySelectorAll(".btn-num");
const dropDown = document.querySelector('#dropdown-container .dropdown');

dropDown.addEventListener("change", function(){
    // 先移除所有按钮的selected类，重置状态
    btns.forEach(btn => btn.classList.remove('selected'));
    // 给匹配当前下拉值的按钮添加选中类
    btns.forEach(btn => {
        if (btn.dataset.value === this.value) {
            btn.classList.add('selected');
        }
    });
});

关键说明 #

1. 先遍历所有按钮移除selected类，确保之前选中的按钮状态被重置
2. 再遍历按钮找到与当前下拉值匹配的目标按钮，添加selected类
3. 使用dataset.value代替getAttribute('data-value')，是更简洁的原生JS获取data属性的方式

内容的提问来源于stack exchange，提问作者kdsla123