下拉框选择时切换表格行功能失效问题排查

我来帮你排查问题并修正代码，咱们一步步来：

问题分析 #

你的代码主要存在两个核心问题，导致功能失效：

• 无效的HTML嵌套结构：你直接把<table>放在了<tr id="Other">内部，这不符合HTML规范——<tr>的直接子元素只能是<td>或<th>。浏览器会自动修正这种错误结构，导致你的$('#Other')选择器无法正确定位目标元素。
• 重复引入jQuery库：页面里同时加载了jQuery 1.10.1和2.1.1，这会造成库冲突，直接影响JS代码的执行。

另外针对你提到的「4页页面，第一页下拉切换第四页表格行」的场景，如果第四页的内容是动态加载的（比如切换到第四页才渲染DOM），还需要额外处理事件绑定的问题，我后面会补充说明。

修正后的代码 #

HTML部分（修复结构+去重复jQuery） #

<!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>User Info Page</title>
</head>
<body>
  <!-- 第一页的下拉选择框 -->
  <select id="ddlCategory">
    <option>Choose</option>
    <option value="Value1">Value1</option>
    <option value="Value2">Value 2</option>
    <option value="Others">Others</option>
  </select>

  <!-- 假设这是第四页的表格（这里简化为直接展示，实际场景可能是分页组件的一部分） -->
  <table>
    <tr>
      <td>
        <asp:Label ID="Label1" runat="server" Text="Category: " />
      </td>
      <td></td>
    </tr>
    <!-- 修复tr的嵌套结构：把内部table放到td里 -->
    <tr id="Other" style="display: none">
      <td colspan="2"> <!-- 用colspan确保表格占满整行 -->
        <table>
          <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>

JS部分（保持逻辑，确保选择器生效） #

$(document).ready(function () {
  $('#ddlCategory').change(function () {
    // 切换目标行的显示状态，用toggle更简洁
    $('#Other').toggle(this.value === "Others");
    // 等价于你原来的逻辑：
    // if (this.value == "Others") { $('#Other').show(); } 
    // else { $('#Other').hide(); }
  });
});

针对多页动态场景的补充说明 #

如果第四页的内容是通过分页组件（比如自定义分页、第三方分页插件）动态渲染的，初始的$(document).ready绑定的事件虽然能触发，但$('#Other')可能还不存在于DOM中。这种情况下你需要：

1. 确保在第四页DOM加载完成后执行显示隐藏逻辑：比如监听分页切换的事件，当切换到第四页时，再根据下拉框的当前值处理#Other的显示状态。
2. 把显示逻辑抽成独立函数，在两个时机调用：
   • 下拉框change事件触发时
   • 切换到第四页时

示例代码（假设分页切换事件是pageChange）：

$(document).ready(function () {
  // 抽成独立函数，方便复用
  function toggleOtherRow() {
    const selectedVal = $('#ddlCategory').val();
    $('#Other').toggle(selectedVal === "Others");
  }

  // 下拉框切换时调用
  $('#ddlCategory').change(toggleOtherRow);

  // 切换到第四页时调用（根据你的分页组件调整事件名称和参数）
  $(document).on('pageChange', function(e, pageNum) {
    if (pageNum === 4) {
      toggleOtherRow();
    }
  });
});

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