选择Balikpapan Office时隐藏Overtime AC下拉选项的JS问题

需求：当选择「Balikpapan Office」选项时，隐藏下拉框中的「Overtime AC」选项。

你写的代码有两处关键问题导致无法正常运行，修正后的代码如下：

var ddlLoc = $("[id$='_ddl_OfficeLocationosf']");
var ddlReqFor = $("[id$='_ddl_RequestForosf']");
// 提前缓存目标选项，避免每次change事件都重复查找DOM
var overtimeAcOption = ddlReqFor.find("option[value='Overtime AC']");

ddlLoc.change(function() {
    // 用val()获取当前选中的选项值，这才是正确的判断逻辑
    if(ddlLoc.val() === 'Balikpapan Office') {
        // 直接对option元素执行hide操作，无需嵌套查找父级
        overtimeAcOption.hide();
    } else {
        overtimeAcOption.show();
    }
});

// 页面初始化时执行一次逻辑，避免初始状态不符合需求
(function initOptionState() {
    if(ddlLoc.val() === 'Balikpapan Office') {
        overtimeAcOption.hide();
    } else {
        overtimeAcOption.show();
    }
})();

问题说明： #

1. 选中值判断错误：原代码里ddlLoc.find("option[value='Balikpapan Office']")返回的是jQuery对象，和true比较永远为真，完全起不到判断选中状态的作用。正确做法是用ddlLoc.val()获取当前选中的选项值，再和目标值对比。
2. 元素操作冗余：原代码里的parent().parent()完全没必要，标准HTML select的<option>元素直接调用hide()/show()就能控制显示隐藏。

如果你的下拉框是第三方UI组件（比如Bootstrap Select这类自定义组件），隐藏/显示选项后可能需要调用组件的刷新方法（比如ddlReqFor.selectpicker('refresh')）来让变更生效，但原生select用上面的代码就足够。

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