Search code examples
phphtmlhtml-selectserver-side

HTML <select> default option


I know this question has been asked before, but I have an unaddressed concern about it.

How can you have a default value that is generated by serverside script?

Ex:

Weekday: <select name="weekday" class="right" value="<% =rs("Weekday")%>">
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
<option value="Sunday">Sunday</option>
</select>

I know you can have the selected attribute with regular elements, but I'm thrown for a loop here.

Any ideas?


Solution

  • You want your HTML to look something like this eventually - notice the selected after "Friday" to select Friday by default:

    <select name="weekday" class="right">
      <option value="Monday">Monday</option>
      <option value="Tuesday">Tuesday</option>
      <option value="Wednesday">Wednesday</option>
      <option value="Thursday">Thursday</option>
      <option value="Friday" selected>Friday</option>
      <option value="Saturday">Saturday</option>
      <option value="Sunday">Sunday</option>
    </select>
    

    A quick and dirty PHP example can be used like so, where each option is asked to verify whether it is the correct option for the current date. If it is, show selected otherwise don't show anything. You can try this code on http://phpfiddle.org/lite.

    <html>                                                                                      
    <body>                                                                                      
        <select name="weekday" class="right">                                                   
            <option value="Monday" <?php echo setSelected('Monday'); ?>>Monday</option>         
            <option value="Tuesday" <?php echo setSelected('Tuesday'); ?>>Tuesday</option>      
            <option value="Wednesday" <?php echo setSelected('Wednesday'); ?>>Wednesday</option>
            <option value="Thursday" <?php echo setSelected('Thursday'); ?>>Thursday</option>   
            <option value="Friday" <?php echo setSelected('Friday'); ?>>Friday</option>         
            <option value="Saturday" <?php echo setSelected('Saturday'); ?>>Saturday</option>   
            <option value="Sunday" <?php echo setSelected('Sunday'); ?>>Sunday</option>         
        </select>                                                                               
    </body>                                                                                     
    </html>                                                                                     
    <?php                                                                                       
    function setSelected($day)                                                                  
    {                                                                                           
        date_default_timezone_set('America/Chicago');                                           
        return strtolower($day) === strtolower(date('l')) ? ' selected' : '';                   
    }                                                                                           
    ?> 
    

    I'd be more inclined to create the select/option on the server side itself. Again, quick and dirty PHP example:

    <html>
    <body>
        <select name="weekday" class="right">
            <?php
            date_default_timezone_set('America/Chicago');
            $dayOfWeek = strtolower(date('l'));
            $days = array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
            foreach ($days as $day)
            {
                echo sprintf("<option value=\"%s\" %s>%s</option>\n",
                    $day,
                    $dayOfWeek == strtolower($day) ? 'selected' : '',
                    $day
                );
            }
            ?>
        </select>
    </body>
    </html>