gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:14:38 24 4
gpt4 key购买 nike

考虑以下 HTMLjs 代码。
在代码中 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>

关于javascript - 在下拉列表中选择后不显示 tr 中的输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35968446/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com