如何在HTML中隐藏/显示下拉列表内容 [英] How to hide/show drop down list content in HTML
问题描述
我在列表中有两个选项（pick / drop），我想要的是，当用户从列表中选择拾取（选择日期/选择时间）字段并且（放置日期/放置时间）字段被隐藏并且反之亦然。
< html>
< script>
函数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>请在下面输入以下详细信息。< / H1>
< table border =1align =leftcellpadding =30cellspacing =5>
< tr>
< td align =left>
雇主< input type =textname =sid/>
Supervisor< input type =textname =ssup/>
部门< input type =textname =sdept/>
< label>选择您的选项< / label>
< select id =myList>
< option value =1onselect =showDiv（）name =pp> Pickup< / option>
< option value =2onselect =hideDiv（） DD >删除< /选项>
< / select>
< div id =div2>
取件日期<输入类型=日期名称=pte/>
代答时间< input type =timename =ptm/>< / br>
< / div>
< div id =div1>
删除日期<输入类型=日期名称=dte/>
下载时间< input type =timename =dtm/>< / br>
< / div>
< input type =submitname =submitvalue =submit/>< / br>
< / td>
< / tr>
< / table>
< table border =1align =rightcellpadding =30cellspacing =2>
< tr>
< td align =left>
< a href =myprojectallrequest.jsp>查看所有请求< / a>< / br>
< a href =myprojectallrequest.jsp>查看待处理的请求< / a>
< / td>
< / tr>
< / table>
< / form>
< / body>
< / html>
首先不要使用段落标记在这里。
使用div标签和地点，
取件日期<输入类型=日期名称=pte>
接送时间<输入类型=时间名称= ptm>
和
删除日期<输入类型=日期name =dte>
下载时间<输入类型=时间名称= dtm>
在一个单独的div标签中，即拾取和放下。
给所需的款式
display：none;
现在在javascript中，使用On选择所选项目上的事件，并将选定的div ID显示为block.Like
function onsElect（）
{
document.getElementById（pickup）。style.display = block;
}
请根据您的要求展开功能。
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>
First don't use paragraph tag here.
Use div tag and place,
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.
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
function onsElect()
{
document.getElementById("pickup").style.display=block;
}
Please expand the functionality based on your requirements.
这篇关于如何在HTML中隐藏/显示下拉列表内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
