页面加载后change事件监听器无法正常触发问题排查

我想要实现通过切换report-selection下拉框来更新页面，隐藏或显示另一个下拉框（即provider-selection）。但change事件监听器无法正常触发：仅在页面加载时生效，动态切换下拉框时无响应。

我尝试了多种if条件，均未触发。若在if语句前添加console.log能正常输出，但if条件内的代码（如日志）无执行。

已确认js文件在页面底部正常加载（其他页面加载时生效的简单文本修改功能可正常运行）。希望有人能指引我找出问题所在，尽量保留hide_element/unhide_element函数以实现代码复用；若不可行，也想了解此类场景的最佳实践。

HTML代码 #

<section>
    <nav>
        <select id="report-selection">
            <option id="report-types" value="null">Pick One</option>
            <option id="report-types" value="AR">Accounts Receivable</option>
            <option id="report-types" value="Production">Daily Production</option>
        </select>
        
        <br>
        <select id="office-selection">
            <option id="office-1" value="office-1">Test-Office 1</option>
            <option id="office-2" value="office-2">Test-Office 2</option>
        </select>
        <br>
        <select id="provider-selection">
            <option id="provider-1" value="provider-1">Test-Provider 1</option>
            <option id="provider-2" value="provider-2">Test-Provider 2</option>
        </select>
        </br>
</section>
<script src="test.js"></script>

JavaScript代码 #

/**********  Report Selection Hide / Show Elements  ***************/
const report_type_selector = document.getElementById('report-types');
const provider = document.getElementById('provider-selection');

report_type_selector.addEventListener("change", provider_field_change);

function provider_field_change(){
    if (report_type_selector.value == 'AR') {      
        hide_element(provider);
        console.log("AR event triggered");
    } 
    if (report_type_selector.value == 'Production') {
        unhide_element(provider);
        console.log("Production event triggered");
    }
}

function hide_element(id) {
    id.style.display = 'none';
}

function unhide_element(id) {
    id.style.display = 'block';
}
/******************************************************************/

编辑补充 #

自动系统判定此问题为重复问题。后续经Nick指出问题所在，已解决，请求关闭此问题。

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