如何实现页面加载时文本字段默认隐藏 选中对应下拉选项后显示

现有代码的问题根因 #

• 页面加载后从来没主动调用过toggleMe方法，需要联动的元素没有任何初始隐藏设置，打开页面就直接全量展示
• 原判断逻辑有漏洞：下拉框默认值是0（对应“请选择”选项），但代码只要值不是Trainee就展示字段，导致啥都没选的时候字段就露出来了
• 元素控制漏了范围：只给两个字段的标题行加了id，输入框单独占的<tr>没纳入控制，就算把input本身设成隐藏，外层表格行还是会留一大块空白

具体实现步骤 #

1. 调整显隐判断规则：明确触发字段展示的选项条件——只有用户选中非Trainee、非默认“请选择”的具体选项时，才展示关联字段，替换原来模糊的else分支逻辑
2. 消除页面闪屏问题：给所有需要联动的关联字段行直接加初始内联样式style="display: none;"，避免JS加载延迟时，页面先短暂显示字段再被JS隐藏的体验问题
3. 合并DOM控制粒度：把字段的文字标签和对应输入框放在同一个表格行内，统一给整行加id做显隐控制，减少冗余的DOM获取逻辑，也不会出现空白行
4. 页面加载时主动校验状态：在window.onload事件中获取下拉框的当前选中值，主动调用一次toggleMe方法执行状态匹配，确保初始状态完全符合预期

修正后的完整代码 #

<script language="javascript" type="text/javascript">
    function toggleMe(val) {
        // 获取所有需要联动的整行元素
        const designateRow = document.getElementById('row-designation');
        const orgRow = document.getElementById('row-organization');

        // 未选择、选中Trainee时隐藏关联字段
        if (val === '0' || val === 'Trainee') {
            designateRow.style.display = "none";
            orgRow.style.display = "none";
        // 选中其他具体角色选项时展示关联字段
        } else {
            designateRow.style.display = "block";
            orgRow.style.display = "block";
        }
    }

    // 页面全部资源加载完成后，主动执行一次状态匹配
    window.onload = function() {
        const selectEl = document.getElementById('role-select');
        toggleMe(selectEl.value);
    }
</script>
</head>
    
<body>
     <form>
          <table width="100%" border="0">
          <tr>
            <td>
              <select id="role-select" name="select" onchange="toggleMe(this.value)">
                <option value="0">Select any one</option>
                <option value="Trainee">Trainee</option>
                <option value="Product">Product</option>
              </select>
            </td>
            <td>&nbsp;</td>
          </tr>
            <!-- 关联字段整行，加初始隐藏样式避免闪屏 -->
            <tr id="row-designation" style="display: none;">
              <td>Enter Designation</td>
              <td><input name="designation" type="text" id="designation" /></td>
              <td>&nbsp;</td>
            </tr>
            <tr id="row-organization" style="display: none;">
              <td>Enter Organization</td>
              <td><input name="organization" type="text" id="organization" /></td>
              <td>&nbsp;</td>
            </tr>
        </table>
       </form>
     </body>

补充说明：如果后续需要新增更多联动选项，只需要在判断逻辑里补充对应选项的展示/隐藏规则即可，不需要修改HTML结构。

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