如何在HTML中隐藏/显示下拉列表内容
[英]How to hide/show drop down list content in HTML
问题描述
I have two options in the list (pickup/drop), what I want is that when user select pickup from the list the (pick date /pick time ) fields appear and (drop date / drop time) fields gets hide and vice versa. 
我在列表中有两个选项（提取/放置），我想要的是，当用户从列表中选择提取时，（选择日期/选择时间）字段会显示，而（放置日期/放置时间）字段会隐藏，反之亦然。
<html>
<script>
function hideDiv()
{
document.getElementById("div1").style.display='none';
document.getElementById("div2").style.display='block';
}
function showDiv()
{
document.getElementById("div1").style.display='block';
document.getElementById("div2").style.display='none';
}
</script>
<body onload="hideDiv()">
<form method = "post">
<H1>Please enter the following details below.</H1>
<table border="1" align="left" cellpadding ="30" cellspacing="5">
<tr>
<td align="left">
Employid <input type="text" name="sid" />
Supervisor <input type="text" name="ssup" />
Department <input type="text" name="sdept" />
<label>Select your option</label>
<select id="myList">
<option value="1" onselect="showDiv() name="pp">Pickup</option>
<option value="2" onselect="hideDiv()name="dd">Drop</option>
</select>
<div id="div2">
Pickup date <input type="date" name="pte" />
Pickup time <input type="time" name="ptm" /></br>
</div>
<div id="div1">
Drop date <input type="date" name="dte" />
Drop time <input type="time" name="dtm" /></br>
</div>
<input type="submit" name="submit" value="submit" /></br>
</td>
</tr>
</table>
<table border="1" align="right" cellpadding ="30" cellspacing="2">
<tr>
<td align="left">
<a href="myprojectallrequest.jsp">View all requests</a></br>
<a href="myprojectallrequest.jsp">View pending requests</a>
</td>
</tr>
</table>
</form>
</body>
</html>
3 个解决方案
解决方案1
1 2013-08-09 09:15:58
First don't use paragraph tag here. 首先，不要在此处使用段落标签 。
Use div tag and place, 使用div标签和位置，
Pickup date <input type="date" name="pte" >
Pickup time<input type= time name= ptm >
and 和
Drop date <input type="date" name="dte" >
Drop time<input type= time name= dtm >
in a seperate div tags namely pickup and drop. 在单独的div标签中，即拾取和放下。
Give needed styles with 给出所需的样式
display:none;
Now in javascript, use On select event on selected item and change the selected div id's display as block.Like 现在在javascript中，对所选项目使用On select事件并更改所选div id的显示为块。
function onsElect()
{
document.getElementById("pickup").style.display=block;
}
Please expand the functionality based on your requirements. 请根据您的要求扩展功能。
解决方案2
0 2013-08-09 08:56:30
<html>
Pickup date <input class="type_pickup typetoggle" type="date" name="pte">
Pickup time <input class="type_pickup typetoggle" type="time" name="ptm">
</html>
<script type="text/javascript">
$('#myList').change( function() {
$('.typetoggle').hide();
if ($(this).val() == "1")
$('.type_pickup').show();
if ($(this).val() == "2")
$('.type_drop').show();
});
</script>
解决方案3
0 2013-08-09 09:15:58
To add dynamics like this you will have to use javascript. 要添加这样的动态，您将必须使用javascript。 You could go for something like this . 你可以去像这样 。
function toggle() {
var foo = document.getElementById('foo'),
bar = document.getElementById('bar'),
foodiv = document.getElementById('foo-div'),
bardiv = document.getElementById('bar-div');
if (foo.checked) {
foodiv.className = '';
bardiv.className = 'hidden';
} else {
foodiv.className = 'hidden';
bardiv.className = '';
}
}
A simple js function that will change the class for elements from hidden to none. 一个简单的js函数，它将元素的类从hidden更改为无。 If that is all you desire, then there's no need for using a library like jQuery. 如果这就是您所需要的，那么就无需使用jQuery之类的库。 If you want to use jQuery you can learn more about it and all of it's great features here . 如果您想使用jQuery，可以在此处了解有关它的更多信息以及所有很棒的功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.