Question

我想在第一个下拉列表中加载日期。在第二个下拉列表中，我正在加载时隙。如果选择了今天的[06-04-2015]日期，那么时间段应该从现在开始加载两个小时。如果选择了第二天[07-04-2015]或[08-04-2015]，则时间段应从上午9点开始。

到目前为止，我的工作是

<select class="form-control"  name="ddate" >
<option value="<?php echo date('d-m-Y') ;?>"><?php echo date("d-m-Y", time()) ;?></option>
<option value="<?php date("d-m-Y", time()+86400) ;?>"><?php echo date("d-m-Y", time()+86400) ;?></option>
<option value="<?php echo date("d-m-Y", time()+172800) ;?>"><?php echo date("d-m-Y", time()+172800) ;?><option>
</select>
<?php
$timeAtHalfHour = time() - ( time() % (60*60));
$timeAtHalfHour += 120*90;  //IDK IF YOU WANT THIS?
$endTime = strtotime('11:00 pm');
$numIntervals = ($endTime - $timeAtHalfHour) / (60*60);
echo "<select name='timeInterval'>";
$strTime1 = date('h:iA', $timeAtHalfHour);
foreach(range(1,$numIntervals) as $cur)
{
   $thisTime = $timeAtHalfHour + 60*60*$cur;
   $strTime2 = date('h:iA', $thisTime);
   echo "<option value=$cur>$strTime1 - $strTime2 </option><br />";
   $strTime1 = $strTime2;
}
echo "</select>";
?>

Answer 1

你应该在Javascript中这样做。关于你提出的问题：

如果今天[06-04-2015]的日期被选中

PHP在服务器端执行，它无法处理在列表中选择元素的事件。

Javascript可以这样做，因为它运行浏览器端，您可以处理此事件。你可以使用JQuery来实现你想要的，这是一个可以帮助你开始的代码片段：

$("form-control[name=ddate]").change(function(){
    $(this).children(":selected"); // This get you all the selected items
});

编辑：使用JQuery和PHP的最终代码：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>

    <select class="form-control"  name="ddate" >
    <option value="<?php echo date('d-m-Y') ;?>"><?php echo date("d-m-Y", time()) ;?></option>
    <option value="<?php echo date("d-m-Y", time()+86400) ;?>"><?php echo date("d-m-Y", time()+86400) ;?></option>
    <option value="<?php echo date("d-m-Y", time()+172800) ;?>"><?php echo date("d-m-Y", time()+172800) ;?><option>
    </select>
    <?php

    echo "<select name='timeInterval' id='timeInterval'>";
    $start    = new DateTime('9AM');
    $end      = new DateTime('11PM');
    $interval = new DateInterval('PT1H'); // Set the interval to One hour
    $period   = new DatePeriod($start, $interval, $end);

    foreach ($period as $dt)
    {
        $dt2 = clone $dt;
        $dt2->add(new DateInterval('PT1H')); // Add One hour
        echo '<option value="'.$dt->format("G").'">'.$dt->format("h:iA").' - '.$dt2->format("h:iA").' </option><br />';
    }

    echo "</select>";
    ?>


    <script>
        $( document ).ready(function() {
            var d = new Date();
            var hour = d.getHours()+2;
            $('#timeInterval option[value="'+hour+'"]').prop('selected', true);
        });
        $(".form-control[name=ddate]").change(function(){
           selDate = $(this).children(":selected").val();
           var d = new Date();
           var month = d.getMonth()+1;
           var day = d.getDate();
           var hour = d.getHours()+2;

           var curDate = (day<10 ? '0' : '') + day + '-' +
            (month<10 ? '0' : '') + month + '-' +
            d.getFullYear();

           // If selected date is equal to the current Date
            if(selDate != curDate)
                $('#timeInterval option:eq(0)').prop('selected', true); // Select 9:00 AM
            else
                $('#timeInterval option[value="'+hour+'"]').prop('selected', true); // Select the next 2 Hours
        });
    </script>
</body>
</html>

在下拉列表中加载时间

1 个答案: