在下拉列表中选择后,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>
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在HTML输入字段中添加不可删除的后缀
- 互斥单选按钮和相应的输入字段
- 在IE9中的输入字段中输入焦点最近按钮
- 选中单选框时将属性添加到输入字段
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 我如何在数字插入中使用逗号,这样它就不会'不要破坏我的输入字段
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- 输入字段将't获取更新的值
- 如何选择多个输入字段并删除所需的属性
- 输入字段,只接受0到12之间的数字
- 单击鼠标,用MySQL数据填充html表单输入字段
- 使用jquery将输入字段转换为文本
- Model中的Typeahead返回空值以形成输入字段
- 如何从查询字符串中的输入字段发回文本
- 如何验证日期、月份和日期的3个独立输入字段;年使用jquery或javascript
- 将值传递给jquery创建的输入字段