如何将多选下拉框已选值互斥的jQuery代码转为原生JavaScript？

以下是将你提供的jQuery代码转换为原生JavaScript的实现，完全保留原逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const selects = document.querySelectorAll('select');
    
    // 给每个下拉框绑定change事件
    selects.forEach(select => {
        select.addEventListener('change', handleSelectChange);
    });

    function handleSelectChange() {
        // 重置所有选项：启用并显示
        const allOptions = document.querySelectorAll('option');
        allOptions.forEach(option => {
            option.disabled = false;
            option.style.display = '';
        });

        // 遍历每个下拉框，处理已选中的值
        selects.forEach(currentSelect => {
            const selectedValue = currentSelect.value;
            if (selectedValue) {
                // 找到除当前下拉框外的其他下拉框
                selects.forEach(otherSelect => {
                    if (otherSelect !== currentSelect) {
                        // 找到对应值的选项，禁用并隐藏
                        const targetOption = otherSelect.querySelector(`option[value="${selectedValue}"]`);
                        if (targetOption) {
                            targetOption.disabled = true;
                            targetOption.style.display = 'none';
                        }
                    }
                });
            }
        });
    }
});

代码说明 #

• 用DOMContentLoaded替代jQuery的$(function())，确保DOM加载完成后执行代码
• 用document.querySelectorAll获取所有下拉框和选项，替代jQuery的选择器
• 用addEventListener绑定change事件，替代jQuery的change()方法
• 原生JS中通过直接设置disabled属性控制选项禁用状态，通过style.display控制显示/隐藏
• 遍历逻辑与原jQuery代码一致：每次选择变化时先重置所有选项，再根据已选中的值禁用其他下拉框中的对应选项

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