双下拉框为多div添加指定类时首个下拉框失效问题排查

我运营一家机加工车间，员工分属不同预设岗位类别，岗位决定其可进入的车间区域。员工可被分配1-2个岗位，部分区域对所有岗位开放。我希望通过两个下拉框选择岗位，当员工满足岗位要求时，对应的可访问区域高亮为绿色。单个下拉框时功能正常，但添加第二个下拉框后，首个下拉框完全失效。

HTML #

<div name="jobs-div" id="jobs-div">
    <p>Assign Jobs:</p>
    <div name="jobs" id="jobs">
        <div name="job1-dropdown" id="job1-dropdown">
            <label for="job1">Job 1:</label>
            <select name="job1" id="job1">
                <option selected="selected" value="default">None</option>
                <option value=".mgr">Manager</option>
                <option value=".sl">Shift Lead</option>
                <option value=".fd">Front Desk</option>
                <option value=".wld">Welder</option>
                <option value=".mac">Machinist</option>
            </select>
        </div>
        <div name="job2-dropdown" id="job2-dropdown">
            <label for="job2">Job 2:</label>
            <select name="job2" id="job2">
                <option selected="selected" value="default">None</option>
                <option value=".mgr">Manager</option>
                <option value=".sl">Shift Lead</option>
                <option value=".fd">Front Desk</option>
                <option value=".wld">Welder</option>
                <option value=".mac">Machinist</option>
            </select>
        </div>
    </div>
</div>
<div class="access all-jobs" name="brk-rm" id="brk-rm">Break Room</div>
<div class="access all-jobs" name="first-aid" id="first-aid">First Aid Station</div>
<div class="access wld" name="wld-cab" id="wld-cab">Welding Equipment</div>
<div class="access mgr sl fd" name="cash-reg" id="cash-reg">Cash Register</div>
<div class="access mgr sl" name="clean" id="clean">Cleaning Supplies</div>
<div class="access sl mac" name="mach-st" id="mach-st">Machine Stations</div>
<div class="access mgr sl" name="keys" id="keys">Shop Keys</div>

CSS #

.all-jobs {
    background-color: lightgreen;
    color: black;
}

.access-enabled {
    background-color: lightgreen;
    color: black;
}

JavaScript #

$("select[name='job1']").change(function() {
    select_changed();
});

function select_changed() {
    jQuery("div[class*='access']").each(function() {
        jQuery(this).removeClass('access-enabled');
        console.log(this);
    });
    jQuery("select[name='job1']").each(function() {
        var selected = jQuery(this).val().split(' ');
        $.each(selected, function(index, value) {
            jQuery(value).addClass('access-enabled');
        });
        console.log(selected);
    });
}
    
$("select[name='job2']").change(function() {
    select_changed();
});

function select_changed() {
    jQuery("div[class*='access']").each(function() {
        jQuery(this).removeClass('access-enabled');
        console.log(this);
    });
    jQuery("select[name='job2']").each(function() {
        var selected = jQuery(this).val().split(' ');
        $.each(selected, function(index, value) {
            jQuery(value).addClass('access-enabled');
        });
        console.log(selected);
    });
}

问题根源是重复定义了select_changed函数，第二个函数会覆盖第一个，导致第一个下拉框触发时，实际执行的是只处理第二个下拉框的逻辑。

修复后的JavaScript代码如下，合并逻辑同时处理两个下拉框的选中值：

// 给两个下拉框绑定同一个change事件
$("select[name='job1'], select[name='job2']").change(function() {
    select_changed();
});

function select_changed() {
    // 先移除所有区域的高亮类
    jQuery("div.access").removeClass('access-enabled');
    
    // 收集两个下拉框的选中值，排除default选项
    const selectedJobs = [];
    const job1Val = jQuery("select[name='job1']").val();
    if (job1Val !== "default") {
        selectedJobs.push(job1Val);
    }
    const job2Val = jQuery("select[name='job2']").val();
    if (job2Val !== "default") {
        selectedJobs.push(job2Val);
    }
    
    // 给对应岗位的区域添加高亮类
    selectedJobs.forEach(job => {
        jQuery(job).addClass('access-enabled');
    });
}

这段代码做了这些优化：

• 统一给两个下拉框绑定事件，避免重复代码
• 先清空所有区域的高亮状态
• 同时获取两个下拉框的选中值，忽略"None"选项
• 遍历选中的岗位，给对应区域添加高亮类

这样不管操作哪个下拉框，都会同时计算两个岗位的可访问区域，实现预期效果。

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