javascript 如何在 HTML 中隐藏/显示下拉列表内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18143141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide/show drop down list content in HTML
提问by Gaurav
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>
回答by Stuart
First don't use paragraph taghere.
首先不要在这里使用段落标签。
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 的显示更改为 block.Like
function onsElect()
{
document.getElementById("pickup").style.display=block;
}
Please expand the functionality based on your requirements.
请根据您的要求扩展功能。
回答by Kevin van Hoorn
<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>
回答by Pankucins
To add dynamics like this you will have to use javascript. You could go for something like this.
要添加这样的动态，您将不得不使用 javascript。你可以去像这样。
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 hiddento none.
If that is all you desire, then there's no need for using a library like jQuery. If you want to use jQuery you can learn more about it and all of it's great features here.
一个简单的 js 函数，它将元素的类从无更改hidden。如果这就是你想要的，那么就没有必要使用像 jQuery 这样的库。如果您想使用 jQuery，您可以在此处了解有关它的更多信息以及它的所有强大功能。
