Member Avatar for Tunnleram

I can't seem to find the answer, but I'm sure it's simple.

I have a select drop down in a form and when I select it, it will start at the very last value instead of the top.

How can I change this to start at the top instead or at least at the value when there is a value in the field?

Any help much appreciated.

  • 3 Contributors
  • 5 Replies
  • 242 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Tunnleram

Dani AI

Generated

Short answer: the browser always opens a <select> at whatever option is currently selected. In this thread the "selected" option was effectively placed at the end (a separate placeholder/echoed value), so the dropdown scrolled to the bottom. ’s pointer to the selected attribute and ’s advice about positioning the selected item were correct, and ’s follow-up shows moving the default fixed the issue.

Practical fixes (ranked):

  • Server-side: generate the option list and mark the matching option with selected while building the list so the chosen item sits where it belongs in the options. This is the cleanest solution and avoids DOM surgery after render.
  • Client-side fallback: set the select’s value or selectedIndex on load if changing server templates is not possible. Example (replace the placeholder with the server-provided id/string):
<script>
document.addEventListener('DOMContentLoaded', function(){
  var sel = document.querySelector('select[name="timezone"]');
  var desired = window.SELECTED_TIMEZONE || 'Europe/London'; // set by server
  if (sel && desired) sel.value = desired;
});
</script>
  • UX placeholder: if a neutral prompt is needed, make a disabled/empty placeholder as the first option (not the last), and only set it when there really is no saved value.

Notes and best practices:

  • Prefer canonical IANA timezone identifiers (e.g., Europe/London) instead of human GMT labels or raw numeric offsets. Offsets break for DST and historical changes; timezone IDs let server/client date libraries compute correct local times reliably.
  • Debugging: open DevTools and check which option has the selected attribute, or run in the console: 
    s = document.querySelector('select[name="timezone"]'); s.selectedIndex; s.options[s.selectedIndex].value;

    Common culprits are an appended selected placeholder, mismatched value strings/whitespace, or accidentally setting selected on the last option.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

Can you show an example of your code? Also, if you add the "selected" attribute, that value will be preselected.

 <option value="myValue" selected>My Value</option>
Member Avatar for Tunnleram

I get I can default the value, but when you drop down the list, the drop down list always goes to the bottom showing the value instead of highlighting it where it belongs in the list.

Using the example below, let's say the value is "(GMT 0:00) Western Europe Time, London, Casablanca"

When I drop down the list it will show

(GMT +12:00 hours) Auckland, Wellington, Fiji
(GMT 0:00) Western Europe Time, London, Casablanca

even though "(GMT 0:00) Western Europe Time, London, Casablanca" would normally be in the middle somewhere.

If the value is blank, it automatically puts me at the end of the list too.

Get what I mean?

<p align="right"><label for="timezone" class="select">Timezone: </label> </p></td>
<td><p align="left"><select name="timezone">
<option value="GMT -12:00 hours" >(GMT -12:00 hours) Eniwetok, Kwajalein</option>
<option value="GMT -11:00 hours" >(GMT -11:00 hours) Midway Island, Samoa</option>
<option value="GMT -10:00 hours" >(GMT -10:00 hours) Hawaii</option>
<option value="GMT -9:00 hours" >(GMT -9:00 hours) Alaska</option>
<option value="GMT -8:00 hours" >(GMT -8:00 hours) Pacific Time (US & Canada)</option>
<option value="GMT -7:00 hours" >(GMT -7:00 hours) Mountain Time (US & Canada)</option>
<option value="GMT -6:00 hours" >(GMT -6:00 hours) Central Time (US & Canada), Mexico City</option>
<option value="GMT -5:00 hours" >(GMT -5:00 hours) Eastern Time (US & Canada)</option>
<option value="GMT -4:00 hours" >(GMT -4:00 hours) Atlantic Time (Canada)</option>
<option value="GMT -3:30 hours" >(GMT -3:30 hours) Newfoundland</option>
<option value="GMT -3:00 hours" >(GMT -3:00 hours) Brazil, Buenos Aires</option>
<option value="GMT -2:00 hours" >(GMT -2:00 hours) Mid-Atlantic</option>
<option value="GMT -1:00 hours" >(GMT -1:00 hours) Azores, Cape Verde Islands</option>
<option value="GMT 0:00 hours" >(GMT 0:00) Western Europe Time, London, Casablanca</option>
<option value="GMT +1:00 hours" >(GMT +1:00 hours) CET(Central Europe Time), Brussels, Paris</option>
<option value="GMT +2:00 hours" >(GMT +2:00 hours) EET(Eastern Europe Time), South Africa</option>
<option value="GMT +3:00 hours" >(GMT +3:00 hours) Kuwait, Moscow, St. Petersburg</option>
<option value="GMT +3:30 hours" >(GMT +3:30 hours) Tehran</option>
<option value="GMT +4:00 hours" >(GMT +4:00 hours) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="GMT +4:30 hours" >(GMT +4:30 hours) Kabul</option>
<option value="GMT +5:00 hours" >(GMT +5:00 hours) Ekaterinburg, Islamabad, Karachi</option>
<option value="GMT +5:30 hours" >(GMT +5:30 hours) Bombay, Calcutta, Madras, New Delhi</option>
<option value="GMT +6:00 hours" >(GMT +6:00 hours) Almaty, Dhaka, Colombo</option>
<option value="GMT +7:00 hours" >(GMT +7:00 hours) Bangkok, Hanoi, Jakarta</option>
<option value="GMT +8:00 hours" >(GMT +8:00 hours) Beijing, Singapore, Hong Kong</option>
<option value="GMT +9:00 hours" >(GMT +9:00 hours) Tokyo, Seoul</option>
<option value="GMT +9:30 hours" >(GMT +9:30 hours) Adelaide, Darwin</option>
<option value="GMT +10:00 hours" >(GMT +10:00 hours) EAST(East Australian Standard), Guam</option>
<option value="GMT +11:00 hours" >(GMT +11:00 hours) Magadan, Solomon Islands</option>
<option value="GMT +12:00 hours" >(GMT +12:00 hours) Auckland, Wellington, Fiji</option>
<option selected><?php echo $timezone; ?></option>
</select>
Member Avatar for almostbob

the last item is 'selected':: the last item will be selected when the drop down list receives focus
put the selected option first and the first item will be selected when the list receives focus, & will start at the top,
put the selected item in the middle and the list will have both up and down options
I would use a more explanatory code at the top
<option value="" selected='selected'>currently <?php echo $timezone; ?>, click to alter</option>

if you want the selected value to display in the code at its proper position in the list of options
kill off the current line 33 and alter each of the other lines to something like
<option <?php if($timezone=="GMT +4:00 hours"){echo ' selected ';} ?> value="GMT +4:00 hours" >(GMT +4:00 hours) Abu Dhabi, Muscat, Baku, Tbilisi</option>

Edited by almostbob
Member Avatar for almostbob

I dont know what you plan to be doing with the code, but it would make calculations simpler if the values of the select were strictly numeric, from +12.0 to -12.0, when you need to print out times relative to servers etc later, then the value will not need to be strtotime() saving processing
you can still human readable the data as simply
echo 'you are located in timezone '.$timezone;
is as easy as
echo ' you are located in timezone GMT '.$timezone.' hours';
and something like
the time in your location is'.time()+$timezone;
code scraps not examined for accuracy

Edited by almostbob
Member Avatar for Tunnleram

Duh it was as simple as where I had the default selection lol Thanks :)

Also thanks for the time on the data. I just snagged this list online so I didn't have to type it all out. I still have to rework the values a bit.

For instance, too, if I setup the values properly, I should be able to auto calculate dates based on people's time zones very easily, but that's for a later date! :) Just starting a new project here so those touches will come later.

Thanks again!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.