基于Session变量值动态显示/隐藏表单元素的技术问题求助

首先看到你已经把PHP传递的Session值设置为BUSINESS（隐藏输入框的value是"Business"），但前端代码的几个错误导致显示逻辑失效，咱们一步步来修正：

• 事件绑定错误：<input>元素没有onload事件，没法通过它的onload触发函数。应该在页面加载完成后执行判断逻辑，比如用window.onload或者jQuery的文档就绪事件。另外你写的onload="myFunction"还少了括号，就算事件有效也不会执行。
• JavaScript变量错误：你已经通过document.getElementById("myInput").value拿到了输入框的值存在x里，结果又写了x.value，这相当于去读取一个字符串的value属性，肯定是undefined，没法和"Business"比较。而且这里直接用字符串相等判断就行，不需要match方法。
• ID大小写不匹配：HTML里你给表格的ID是Other（首字母大写），但JS里用的是document.getElementById("other")（全小写），JS对ID的大小写是敏感的，所以找不到这个元素，自然没法修改它的显示状态。
• HTML结构问题：你把内部的<table id="Other">直接放在<tr>里，这不符合HTML规范，应该把它放在<td>中，否则浏览器可能会解析出奇怪的结构，影响JS选择元素。
• 重复引入jQuery：页面里引入了两个不同版本的jQuery（2.1.1和1.10.1），这可能导致冲突，保留一个版本就好。
• 重复ID问题：页面里有多个id="txtOthers"，ID在页面中必须唯一，否则会导致后续操作异常。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>
<body>
  <input type="hidden" id="myInput" value="Business">
  <table>
    <tr>
      <td>
        <asp:Label ID="Label1" runat="server" Text="Category: " />
      </td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2">
        <table id="Other" style="display: none">
          <tbody>
            <tr>
              <td><input id="txtOthers1" type="text" runat="server" /></td>
            </tr>
            <tr>
              <td><input id="txtOthers2" type="text" runat="server" /></td>
            </tr>
            <tr>
              <td><input id="txtOthers3" type="text" runat="server" /></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

JavaScript部分 #

// 原生JS实现：页面加载完成后执行判断
window.onload = function() {
  var x = document.getElementById("myInput").value;
  // 注意ID大小写一致，直接用严格相等判断字符串
  if(x === "Business"){
    document.getElementById("Other").style.display = "table";
  } else {
    document.getElementById("Other").style.display = "none";
  }
};

// 如果你想用jQuery简化代码，也可以这样写：
// $(document).ready(function() {
//   var x = $("#myInput").val();
//   x === "Business" ? $("#Other").show() : $("#Other").hide();
// });

这样修改后，页面加载时就会自动判断隐藏输入框的值，正确显示或隐藏指定的表格区域了。

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