0

リストには2つのオプション（ピックアップ/ドロップ）があります。ユーザーがリストからピックアップを選択すると、（ピック日/ピック時間）フィールドが表示され、（ドロップ日/ドロップ時間）フィールドが非表示になり、その逆になります。

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

3 に答える 3

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

要件に基づいて機能を拡張してください。

于 2013-08-09T09:15:58.980 に答える
0 
<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>
于 2013-08-09T08:56:30.977 に答える
0

このようなダイナミクスを追加するには、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 = '';
    }
}

hidden要素のクラスを noneに変更する単純な js 関数。それだけなら、jQuery のようなライブラリーを使用する必要はありません。jQuery を使用したい場合は、jQuery の詳細と優れた機能のすべてをここで学ぶことができます。

于 2013-08-09T09:15:58.887 に答える