创建链接的时间输入 - 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>

希望这有助于！