[英]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>
在這里，您尋找"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");
}
您以錯誤的方式使用了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>
嘗試這個。
<!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>
在下拉框中選擇出生日期后，無法實時顯示我的年齡。 為什么？
[英]After selecting the date of birth in the drop-down box, my age cannot be displayed in real time. Why?
如何在選擇下拉列表中的復選框后清除v-autocomplete（多個）搜索輸入？
[英]How to clear v-autocomplete (multiple) search input after selecting the checkbox in the drop-down list?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.