Question

我在列表中有两个选项（拾取/丢弃），我想要的是当用户从列表中选择拾取时，出现（选择日期/选择时间）字段并且（丢弃日期/丢弃时间）字段被隐藏反之亦然。

<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>

Answer 1

首先不要在这里使用段落标记。

使用div标签和地点，

Pickup date <input type="date" name="pte" >
Pickup time<input type= time  name= ptm >

和

Drop date <input type="date" name="dte" >
Drop time<input type= time  name= dtm >

在一个单独的div标签中，即拾取和放下。

使用

提供所需的样式

显示：无;

现在在javascript中，对所选项目使用On select事件，并将所选div id的显示更改为block.Like

function onsElect()
{
document.getElementById("pickup").style.display=block;
}

请根据您的要求扩展功能。

Answer 2

<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>

Answer 3

要添加这样的动态，你必须使用javascript。你可以选择像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 = '';
    }
}

一个简单的js函数，它将元素的类从hidden更改为无。如果这就是您想要的，那么就不需要使用像jQuery这样的库。如果你想使用jQuery，你可以了解更多关于它的信息，以及所有这些功能here。

如何在HTML中隐藏/显示下拉列表内容

3 个答案: