Question

考虑以下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>

Answer 1

在这里查找"rollnohide"，

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

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

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

所以你的功能应该如下所示，show hide logic reversed，

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");
        }

Answer 2

您的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>

Answer 3

试试这个。

override

在下拉列表中选择后，不显示tr中的输入字段

3 个答案: