在下拉列表中选择后，tr 中的输入字段不显示 - input field in tr is not displayed after selecting in drop down

请考虑以下HTML并js代码。
在代码中document.getElementById("rollnohide")不起作用。下拉列表具有显示，以在选择房间号后显示输入字段，并在其他情况下隐藏。

<!DOCTYPE html>
<html>
<head>
  <title>Search Student</title>
  <script type="text/javascript">
  function searchBy()
  {
    var node = document.getElementById("search").value;
    var other = document.getElementById("roomnohide");
    if(node=="roomnumber")
      other.style.visibility = "hidden";
    else
      other.style.visibility = "visible";
    alert("Success");
  }
  </script>
</head>
<body>
  <h1 align="center">Search Student</h1>
  <formset>
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <table align="center">
        <tr>
          <td>Search By : </td>
          <td>
            <select id="search" required onchange="searchBy()" >
              <option value="rollno">Roll No</option>
              <option value="name">Name </option>
              <option value="roomnumber">Room No</option>
            </select>
          </td>
        </tr>
        <tr id="roomnohide" style="visibility: hidden;">
          <td> Room No</td>
            <td><input type="text" pattern="[0-9]{3}" maxlength=3 name="rollno"></input></td>
          </td>
        </tr>
      </table>
    </form>
  </formset>
</body>
</html>

你以错误的方式得到了if语句。当您实际想要显示该行时，它会隐藏该行，反之亦然。所以改变：

    if(node=="roomnumber")
      other.style.visibility = "hidden";
    else
      other.style.visibility = "visible";

自：

    if(node=="roomnumber")
      other.style.visibility = "visible";
    else
      other.style.visibility = "hidden";

检查代码段：

<!DOCTYPE html>
<html>
<head>
  <title>Search Student</title>
  <script type="text/javascript">
  function searchBy()
  {
    var node = document.getElementById("search").value;
    var other = document.getElementById("roomnohide");
    if(node=="roomnumber")
      other.style.visibility = "visible";
    else
      other.style.visibility = "hidden";
  }
  </script>
</head>
<body>
  <h1 align="center">Search Student</h1>
  <formset>
    <form method="post" action="">
      <table align="center">
        <tr>
          <td>Search By : </td>
          <td>
            <select id="search" required onchange="searchBy()" >
              <option value="rollno">Roll No</option>
              <option value="name">Name </option>
              <option value="roomnumber">Room No</option>
            </select>
          </td>
        </tr>
        <tr id="roomnohide" style="visibility: hidden;">
          <td> Room No</td>
            <td><input type="text" pattern="[0-9]{3}" maxlength=3 name="rollno"></input></td>
          </td>
        </tr>
      </table>
    </form>
  </formset>
</body>
</html>

在这里你寻找"rollnohide" ，

var other = document.getElementById("rollnohide");

但是你的元素有一个id="roomnohide"

<tr id="roomnohide" style="visibility: hidden;">

所以你的函数应该如下，显示隐藏逻辑颠倒，

function searchBy() {
            var node = document.getElementById("search").value;
            var other = document.getElementById("roomnohide");
            if (node == "roomnumber"){
                other.style.visibility = "visible";
            }
            else{
                other.style.visibility = "hidden";
            }
            alert("Success");
        }

试试这个。

<!DOCTYPE html>
<html>
<head>
<title>Search Student</title>
<script type="text/javascript">
function searchBy()
{
  var node = document.getElementById("search").value;
  var elem;
  var other_1, other_2;
  if(node=="roomnumber"){
    elem = document.getElementById("roomnohide");
    other_1 = document.getElementById("rollnohide");
    other_2 = document.getElementById("namehide");
  }else if(node == 'rollno'){
    elem = document.getElementById("rollnohide");
    other_1 = document.getElementById("roomnohide");
    other_2 = document.getElementById("namehide");
  }else if(node == 'name'){
    elem = document.getElementById("namehide");
    other_1 = document.getElementById("rollnohide");
    other_2 = document.getElementById("roomnohide");
  }
  try{
     elem.style.visibility = "visible";
     other_1.style.visibility = "hidden";
     other_2.style.visibility = "hidden";
     alert("Success");
  }catch(e){
  }
}
</script>
</head>
<body>
<h1 align="center">Search Student</h1>
<formset>
<form method="post" action="<?php echo     htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  <table align="center">
    <tr>
      <td>Search By : </td>
      <td>
        <select id="search" required onchange="searchBy()" >
          <option value="rollno">Roll No</option>
          <option value="name">Name </option>
          <option value="roomnumber">Room No</option>
        </select>
      </td>
    </tr>
    <tr id="roomnohide" style="visibility: hidden;">
      <td> Room No</td>
        <td><input type="text" pattern="[0-9]{3}" maxlength=3 name="roomno"></input></td>
      </td>
    </tr>
    <tr id="namehide" style="visibility: hidden;">
      <td> Name</td>
        <td><input type="text" name="name"></input></td>
      </td>
    </tr>
    <tr id="rollnohide" style="visibility: hidden;">
      <td> Roll No</td>
        <td><input type="text" pattern="[0-9]{3}" name="rollno"></input></td>
      </td>
    </tr>
  </table>
</form>
</formset>
</body>
</html>