CODEWITHSUNDEEP
javascripthtml
Gaurav
Gaurav

Reputation: 103

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>

Upvotes: 0

Views: 19719

Answers (3)

Pankucins
Pankucins

Reputation: 1720

To add dynamics like this you will have to use 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. 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.

Upvotes: 0

Stuart
Stuart

Reputation: 410

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.

Upvotes: 1

Kevin van Hoorn
Kevin van Hoorn

Reputation: 131

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

Upvotes: 0

Related Questions