Question

我想在这个问题上做同样的事情：Scroll to a specific div

我已经加载并运行了这些脚本：

<script src=\"./js/jquery-1.11.2.min.js\"></script>
<script src=\"./js/jquery-ui.js\"></script>
<script src=\"./js/myscript.js\"></script>

我目前的PHP / HTML代码：

echo "<select name=\"travel\" id=\"mySelect\">";
                echo "<option value=\"\" selected=\"selected\"></option>";

                for ( $hours = 0 ; $hours <= 23 ; $hours++ ) {
                    for ( $minutes = 0 ; $minutes <= 45 ; $minutes += 15 ) {

                        echo "<option value=\"$hours:$minutes\">";
                        printf("%02d", $hours);
                        echo ":";
                        printf ("%02d", $minutes);
                        echo "</option>";
                    }
                }
echo "</select>";

My JS里面的myscript.js：

    $('#mySelect').focus(function(){

    if($(this).data('focused') !==  true)
    {
        $(this).data('focused',true);  
        $(this).children(':last-child').prop('selected',true);
    }

});

$('#mySelect').blur(function(){
   $(this).data('focused',false); 
});

当我打开23:45的下拉菜单时应该选择，但它会一直显示空白值。

最后我想将它打开下拉菜单直接打开到10:00而不是空白或00:00，这样用户不必每次都向下滚动很多次。
没有错误消息，所以我真的不知道我做错了什么。有人能突出我吗？

Answer 1

只需将银行<option>插入列表中的正确位置即可获得无需javascript的结果。

你可以通过检查$hour和一个简单的布尔标志来做到这一点：

echo "<select name=\"travel\" id=\"mySelect\">";
$blankInserted = false;
for ( $hours = 0 ; $hours <= 23 ; $hours++ ) {
    for ( $minutes = 0 ; $minutes <= 45 ; $minutes += 15 ) {
        if($hours==10 && !$blankInserted){
            echo "<option value=\"\" selected=\"selected\"></option>";
            $blankInserted = true;
        }

        echo "<option value=\"$hours:$minutes\">";
        printf("%02d", $hours);
        echo ":";
        printf ("%02d", $minutes);
        echo "</option>";
    }
}
echo "</select>";

Answer 2

另一种方法可能是使用DateTime对象使用PHP完全解决您的问题：

// Make a DateTime object with the current date and time
$today = new DateTime();

// Make an empty array to contain the hours
$aHours = array();

// Make another DateTime object with the current date and time
$oStart = new DateTime('now');

// Set current time to midnight
$oStart->setTime(0, 0);

// Clone DateTime object (This is like 'copying' it)
$oEnd = clone $oStart;

// Add 1 day (24 hours)
$oEnd->add(new DateInterval("P1D"));

// Add each hour to an array
while ($oStart->getTimestamp() < $oEnd->getTimestamp()) {
    $aHours[] = $oStart->format('H');
    $oStart->add(new DateInterval("PT1H"));
}

// Create an array with quarters
$quarters = array(
    '0',
    '15',
    '30',
    '45',
);

// Get the current quarter
$currentQuarter = $today->format('i') - ($today->format('i') % 15);

然后打印：

<select name="travel" id="mySelect">
    <option value="-1">Choose a time</option>
    <?php foreach ($aHours as $hour): ?>
        <?php foreach ($quarters as $quarter): ?>
            <option value="<?= sprintf("%02d:%02d", $hour, $quarter); ?>" <?= ($hour == $today->format('H') && $quarter == $currentQuarter) ? 'selected' : ''; ?>>
                <?= sprintf("%02d:%02d", $hour, $quarter); ?>
            </option>
        <?php endforeach; ?>
    <?php endforeach; ?>
</select>

在上面的示例中，您将生成一天中所有小时的下拉列表。将自动选择当前小时和季度。

选择列表滚动到特定选项问题

2 个答案: