創建鏈接的時間輸入 - HTML/PHP/JAVASCRIPT

Question

我需要「鏈接」兩個輸入表單，所以如果我選擇一定的時間，第二個輸入將不會在選擇之前顯示時間。

恩：我選擇16:30，第二輸入顯示：17:00，17:30，18:00，等等

對不起我的英文不好。這是代碼。我想我需要使用JS來隱藏其他對象，但我不知道該怎麼做。

感謝您的幫助

<div class="input-group"> 
    <!--start time--> 
    <span class="input-group-addon"><div class="ciao">Inizio</div></span> 
    <select class="form-control" name="start"> 
    <?php $orari=h oursRange(12 * 3600, 20 * 3600, 30 * 60); 
      foreach ($orari as $key=>$value) { 
      echo "<option>$value</option>"; 
    } ?> 
    </select> 
</div> 

<!--end time--> 
<div class="input-group"> 
    <span class="input-group-addon"><div class="ciao">Fine</div></span> 
    <select class="form-control" name="end"> 
    <?php foreach ($orari as $key=>$value) 
      { 
      echo "<option>$value</option>"; 
     } ?> 
    </select> 
</div> 

Answer 1

我建議你看一下jQuery的Timepicker：http://jonthornton.github.io/jquery-timepicker/

這裏是你可以下載timepicker後與您的代碼使用一個例子：

<div id="timepicker"> 
 
    Inizio: <input type="text" class="time start" name="start" /> 
 
    Fine: <input type="text" class="time end" name="end" /> 
 
</div> 
 

 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="jquery.timepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" /> 
 

 
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" /> 
 
<script type="text/javascript" src="lib/site.js"></script> 
 
<link rel="stylesheet" type="text/css" href="lib/site.css" /> 
 
<script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script> 
 
<script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script> 
 

 
<script> 
 
    $('#timepicker .time').timepicker({ 
 
     'showDuration': true, 
 
     'timeFormat': 'g:ia' 
 
    }); 
 

 
    $('#timepicker').datepair(); 
 
</script>

希望這有助於！