JS监听HTML下拉框选项禁用输入字段时表格消失问题排查

表格消失的核心原因是你取消注释的代码段运行时抛出了JS异常，阻塞了后续DOM渲染逻辑，或者代码逻辑误操作了表格对应的DOM节点，导致表格被删除/覆盖。 #

• 第一步：先排查基础错误
  • 检查代码是否有语法问题：比如括号/引号不闭合、变量名/选择器拼写错误，注意#TipoPatron2的ID大小写要和DOM节点完全一致
  • 检查原有desact函数是否存在误操作全局DOM的逻辑：比如对父容器做innerHTML赋值、调用remove()删除节点的操作，不小心覆盖/删除了表格所在的节点
• 第二步：确保代码在DOM渲染完成后执行
  如果你的JS代码写在表格DOM之前，执行document.querySelector('#TipoPatron2')时节点还未渲染，会返回null，后续调用addEventListener会直接抛出异常，阻塞页面渲染导致表格不显示。可以任选一种方案解决：

  把所有JS代码放到</body>闭合标签之前
  把逻辑包裹在DOMContentLoaded事件回调中，等DOM完全渲染后再执行

• 第三步：替换为兼容的逻辑代码
  完整可用的实现代码如下，直接替换你原有注释的相关代码即可：

  // 禁用/启用目标输入框的函数
  function desact(isDisabled) {
    // 匹配所有id前缀为HP2C的输入框
    document.querySelectorAll('input[id^="HP2C"]').forEach(inputItem => {
      inputItem.disabled = isDisabled;
      // 如有需要，禁用时可以同步清空输入值
      // if(isDisabled) inputItem.value = '';
    })
  }
  
  // 页面DOM渲染完成后执行绑定逻辑
  document.addEventListener('DOMContentLoaded', function() {
    const patronSelect = document.querySelector('#TipoPatron2');
    // 节点不存在直接返回，避免报错
    if(!patronSelect) return;
    // 页面初始化时先判断一次选中状态
    desact(patronSelect.value === '10');
    // 绑定下拉框change事件
    patronSelect.addEventListener('change', function() {
      desact(this.value === '10');
    })
  })
  

• 第四步：如果按以上步骤操作后问题仍然存在，打开浏览器开发者工具（F12打开，切换到Console面板），查看具体的报错信息，根据报错提示定位问题即可。

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