select下拉选择选项后如何控制对应表单项显隐并解决相关报错？

报错根因 #

• getElementsByClassName 方法接收的参数是纯类名，不需要加选择器前缀.，你传入.ujroh-style 无法匹配到对应DOM元素
• getElementsByClassName 返回的是包含所有匹配元素的类数组集合，无法直接对整个集合设置style属性，必须遍历集合内的每个DOM元素单独设置
• 原有代码逻辑和需求相反：你需要的是选konvensional时显示、选syariah时隐藏，原有代码写反了判断逻辑

修复后代码 #

document.querySelector('#quotation_category').addEventListener('change', () => {
    const select_value = document.querySelector('#quotation_category').value
    // 获取所有匹配的Ujroh相关td元素
    const ujrohItems = document.querySelectorAll('.ujroh-style')
    // 遍历每个元素设置显示状态
    ujrohItems.forEach(item => {
        if (select_value === "konvensional") {
            // td元素默认display为table-cell，比revert兼容性更好
            item.style.display = "table-cell"
        } else if (select_value === "syariah") {
            item.style.display = "none"
        }
    })
})

额外优化说明 #

如果想要页面初始加载时就根据下拉框默认值自动适配显示/隐藏状态，可以在事件绑定代码末尾手动触发一次change事件：

document.querySelector('#quotation_category').dispatchEvent(new Event('change'))

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