多选select控件选中Test项时alert触发异常问题求助

原因分析 #

当<select>开启multiple多选模式时，元素的value属性只会返回第一个被选中的选项的值，而非所有选中项的集合。

比如你先选中Desktop再选中Test时，$cb.value的结果是"desktop"，不满足$cb.value == "test"的判断条件，所以alert无法触发。

修复代码 #

要正确检测test选项是否被选中，需要遍历所有选项并检查它们的selected状态：

var $cb = document.querySelector("#equipments");

$cb.addEventListener("change", function() {
    // 检查是否存在value为test且被选中的选项
    const isTestSelected = Array.from(this.options).some(option => 
        option.value === "test" && option.selected
    );
    
    if (isTestSelected) {
        alert("Selected!");
    }
});

这段代码通过Array.from()将选项集合转为数组，再用some()方法判断是否有符合条件的选项——只要test选项被选中，不管是否和其他选项一起多选，都会触发alert弹窗。

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