如何实现选中select选项后清空其余select的空值？附现有代码

你的代码逻辑存在错误：当某个select触发change事件时，回调函数仅针对当前绑定事件的select（也就是触发事件的那个）进行判断，而e.target就是这个select本身，所以e.target.id != sel.getAttribute('id')永远为假，导致不会清空任何其他select。

修正后的代码 #

JavaScript 代码 #

const selects = document.querySelectorAll('.selectes');
selects.forEach(sel => {
    sel.addEventListener('change', function(e) {
        // 遍历所有select，清空除当前触发事件的select之外的其他select
        selects.forEach(item => {
            if (item !== e.target) {
                item.value = '';
            }
        });
    });
});

HTML 代码（修正了label的for属性错误，原代码所有label指向同一个id不符合规范） #

<label for="cars">Choose a car:</label>
<select name="cars" id="cars" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<label for="cycles">Choose a cycle:</label>
<select name="cycles" id="cycles" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<label for="bikes">Choose a bike:</label>
<select name="bikes" id="bikes" class="selectes">
    <option value="">Value Empty</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

逻辑说明 #

1. 先获取所有带有.selectes类的select元素
2. 给每个select绑定change事件
3. 当某个select触发change事件时，再次遍历所有select元素：
   • 判断当前遍历的select是否是触发事件的那个
   • 如果不是，就将其value设为空，清空选中状态

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