在选择相关下拉选项之前，如何在页面加载时默认隐藏文本字段？
[英]How to have text fields hidden by default on page load until the relevant drop down option has been selected?
问题描述
加载页面时如何保持文本字段默认隐藏？ 但是，在选择相关下拉选项时显示。 javascript 在一定程度上起作用。 但是，我想最初隐藏输入字段。
<script language="javascript" type="text/javascript">
function toggleMe(val)
{
var designation = document.getElementById('designation');
var organization = document.getElementById('organization');
var lavelOne = document.getElementById('lavel-one');
var lavelTwo = document.getElementById('lavel-two');
if(val=='Trainee')
{
designation.style.display = "none";
organization.style.display = "none";
lavelOne.style.display = "none";
lavelTwo.style.display = "none";
}
else
{
designation.style.display = "block";
organization.style.display = "block";
lavelOne.style.display = "block";
lavelTwo.style.display = "block";
}
}
</script>
</head>
<body>
<form>
<table width="100%" border="0">
<tr>
<td><select name="select" onchange="toggleMe(this.value)">
<option value="0">Select any one</option>
<option value="Trainee">Trainee</option>
<option value="Product">Product</option>
</select></td>
<td> </td>
</tr>
<tr id="lavel-one">
<td>Enter Designation</td>
<td> </td>
</tr>
<tr>
<td><input name="designation" type="text" id="designation" /></td>
<td> </td>
</tr>
<tr id="lavel-two">
<td>Enter Organization</td>
<td> </td>
</tr>
<tr>
<td><input name="organization" type="text" id="organization" /></td>
<td> </td>
</tr>
</table>
</form>
</body>
1 个解决方案
解决方案1
1 已采纳 2021-04-02 16:23:07
您可以使用 CSS 隐藏元素：
#designation, #lavel-one, #organization, #lavel-two{
display: none;
}
我认为您还应该在val=='0'时隐藏元素。
#designation, #lavel-one, #organization, #lavel-two{ display: none; }
<script language="javascript" type="text/javascript"> function toggleMe(val) { var designation = document.getElementById('designation'); var organization = document.getElementById('organization'); var lavelOne = document.getElementById('lavel-one'); var lavelTwo = document.getElementById('lavel-two'); console.log(val); if(val=='Trainee' || val=='0') { designation.style.display = "none"; organization.style.display = "none"; lavelOne.style.display = "none"; lavelTwo.style.display = "none"; } else { designation.style.display = "block"; organization.style.display = "block"; lavelOne.style.display = "block"; lavelTwo.style.display = "block"; } } </script> </head> <body> <form> <table width="100%" border="0"> <tr> <td><select name="select" onchange="toggleMe(this.value)"> <option value="0">Select any one</option> <option value="Trainee">Trainee</option> <option value="Product">Product</option> </select></td> <td> </td> </tr> <tr id="lavel-one"> <td>Enter Designation</td> <td> </td> </tr> <tr> <td><input name="designation" type="text" id="designation" /></td> <td> </td> </tr> <tr id="lavel-two"> <td>Enter Organization</td> <td> </td> </tr> <tr> <td><input name="organization" type="text" id="organization" /></td> <td> </td> </tr> </table> </form> </body>
使用JavaScript从下拉列表中选择选项后，如何显示内容？
[英]How to display something after an option from a drop down list has been selected using javascript?
一旦选择了下拉菜单，请更改文本字段（在1页上有多种表格）
[英]Change Text Field Once Drop Down Has Been Selected (Multiple forms on 1 page)
从数据库填充的下拉列表中选择选项时，如何动态加载文本字段中的数据？ Laravel Ajax
[英]How to load data in text fields dynamically when selecting an option from drop down which is populated from database? Laravel Ajax
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.