title: Show drop down list onclick others element (text input)
body: <p>I have a text input (z-index:1) which i put in front of the drop down box. So that the user can input text and also choose from drop down list. I did hide the down arrow button for the drop down list. So, I want when user click on the text input, the drop down listing will automatic display. I plan to used Jquery to display the listing, but i don't know what function that I need to use.</p>
  
  <p>Here my code</p>
  
  <pre><code>    &lt;span id="plantimefromdd" style="position:relative;"&gt;
          &lt;input id="textin1" name="textin1" type="text" style="width:100px;position:absolute;top:-4px;left:13;z-index:1;padding:3;margin:0;opacity:0;" value="&lt;?php echo $todisplay; ?&gt;" onclick="this.style.opacity=1;"&gt;
          &lt;?php
          //display dropdown time for from interval 5 minutes
          $start = strtotime('12:00am');
          $end = strtotime('11:55pm');
  
          echo '&lt;select name="plantimefromdd" style="width:100px;height:26px;-webkit-appearance:none;border-width:2px;border-color:#D8D8D8;" onchange="$(\'input#textin1\').val($(this).val());"&gt;';
  
          for ($i = $start; $i &lt;= $end; $i += 300){
              $timerfrom = date('H:i', $i);
              if($todisplay == $timerfrom) {$temp = "selected";} else {$temp = "";}
              echo '&lt;option '.$temp.' &gt;' . $timerfrom ;
                  }
          echo '&lt;/select&gt;';
          ?&gt;
      &lt;/span&gt;
  </code></pre>
  
  <p>Thank you for your helping.</p>