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

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

javascript php jquery html css

Javascript 在下拉列表中选择后，tr中的输入字段不显示,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,考虑以下HTML和js代码。在代码文档中。getElementById（“rollnohide”）不起作用。选择房间号后，下拉列表显示输入字段，在其他情况下隐藏 <!DOCTYPE html> <html> <head> <title>Search Student</title> <script type="text/javascript"> function searchBy() { var no

考虑以下

HTML

和

js

代码。
在代码

文档中。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>


搜索学生
函数searchBy（）
{
var节点=document.getElementById（“搜索”）.value；
var other=document.getElementById（“roomnohide”）；
如果（节点==“房间号”）
other.style.visibility=“隐藏”；
其他的
other.style.visibility=“可见”；
警惕（“成功”）；
}
搜索学生
您可以在这里查找“rollnohide”

但是您的元素有一个id=“roomnohide”

您使用了错误的if
语句。当您实际想要显示行时，它会隐藏该行，反之亦然。因此，改变：
    if(node=="roomnumber")
      other.style.visibility = "hidden";
    else
      other.style.visibility = "visible";

致：
检查代码段：


搜索学生
函数searchBy（）
{
var节点=document.getElementById（“搜索”）.value；
var other=document.getElementById（“roomnohide”）；
如果（节点==“房间号”）
other.style.visibility=“可见”；
其他的
other.style.visibility=“隐藏”；
}
搜索学生
搜索人：
卷号
名称
房间号
房间号
试试这个
<!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>


搜索学生
函数searchBy（）
{
var节点=document.getElementById（“搜索”）.value；
var-elem；
var other_1，other_2；
如果（节点==“房间号”）{
elem=document.getElementById（“roomnohide”）；
other_1=document.getElementById（“rollnohide”）；
other_2=document.getElementById（“namehide”）；
}else if（节点=='rollno'）{
elem=document.getElementById（“rollnohide”）；
other_1=document.getElementById（“roomnohide”）；
other_2=document.getElementById（“namehide”）；
}else if（节点=='name'）{
elem=document.getElementById（“namehide”）；
other_1=document.getElementById（“rollnohide”）；
other_2=document.getElementById（“roomnohide”）；
}
试一试{
elem.style.visibility=“可见”；
其他_1.style.visibility=“隐藏”；
其他_2.style.visibility=“隐藏”；
警惕（“成功”）；
}捕获（e）{
}
}
搜索学生
将此id=“roomnohide”
放在
内的输入字段中，而不是放在上。您找到要查找的答案了吗？请留下评论和/或接受回答。
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");
        }

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