CODEWITHSUNDEEP
javascriptphpjqueryhtml
BackTrack57
BackTrack57

Reputation: 395

Select list scroll to a specific option issue

I would like to do the same kind of things being done in this question : Scroll to a specific div

I have those scripts loaded and working :

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

My current PHP/HTML code : 

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 inside 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); 
});

It should select when I open the dropdown menu 23:45 but it keeps showing the blank value.

At the end I would like set it open the dropdown menu directly to something like 10:00 instead of blank or 00:00 so users don't have to scroll down a lot each times.
There is no errors messages so I realy don't know what I'm doing wrong. Could someone highlight me please?

Upvotes: 0

Views: 411

Answers (2)

Peter
Peter

Reputation: 9113

A different approach could be to completely solve your issue using PHP by using the DateTime object:

// 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);

Then to print:

<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>

In the above example you will generate a dropdown with all hours of a day. The current hour and quarter will be automatically selected.

Upvotes: 1

Steve
Steve

Reputation: 20469

You could get the result you desire without javascript, by simply inserting the bank <option> at the correct point in the list.

You can do that by checking the $hour and a simple boolean flag:

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>";

Upvotes: 1

Related Questions