title: How to hide/show drop down list content in HTML
body: <p>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. </p>
  
  <pre><code>&lt;html&gt;
  &lt;script&gt;
               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'; 
        }
  
  &lt;/script&gt;
      &lt;body onload="hideDiv()"&gt;
          &lt;form method = "post"&gt;
              &lt;H1&gt;Please enter the following details below.&lt;/H1&gt;
              &lt;table border="1" align="left" cellpadding ="30" cellspacing="5"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;
                          Employid &lt;input type="text" name="sid" /&gt; 
                          Supervisor &lt;input type="text" name="ssup" /&gt;
                          Department &lt;input type="text" name="sdept" /&gt;
  
                              &lt;label&gt;Select your option&lt;/label&gt;
                              &lt;select id="myList"&gt;
                         &lt;option value="1" onselect="showDiv() name="pp"&gt;Pickup&lt;/option&gt;
                        &lt;option value="2" onselect="hideDiv()name="dd"&gt;Drop&lt;/option&gt;
                              &lt;/select&gt;
                       &lt;div id="div2"&gt;
                          Pickup date &lt;input type="date" name="pte" /&gt;
                          Pickup time &lt;input type="time"  name="ptm" /&gt;&lt;/br&gt;
                   &lt;/div&gt;
                   &lt;div id="div1"&gt;
                          Drop date &lt;input type="date" name="dte" /&gt;
                          Drop time &lt;input type="time"  name="dtm" /&gt;&lt;/br&gt;
                    &lt;/div&gt;
                          &lt;input type="submit" name="submit" value="submit" /&gt;&lt;/br&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;table border="1" align="right" cellpadding ="30" cellspacing="2"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;
                          &lt;a href="myprojectallrequest.jsp"&gt;View all requests&lt;/a&gt;&lt;/br&gt;
                          &lt;a href="myprojectallrequest.jsp"&gt;View pending requests&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>