var my_timezones=[
'Africa/Abidjan',
'Africa/Accra',
'Africa/Addis_Ababa',
'Africa/Algiers',
....................
// copy the full code below /////
..............
'Pacific/Wake',
'Pacific/Wallis',
'UTC'
]
We can create one drop down list box by using above timezone array.
We can also display the changing clock after selection of timezone from the dropdown list here
Select one time zone
Full code is here, copy and use the my_timezones[] array from below.
for (i=0;i<my_timezones.length;i++)
{
addOption(document.f1.tz,my_timezones[i],my_timezones[i]);
}
function addOption(selectbox,text,value )
{var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
//////////////
function disp_TZ(){
tz=f1.tz.options[f1.tz.options.selectedIndex].value;
str= new Date().toLocaleString("en-NZ", {timeZone: tz,timeZoneName:"short"})
document.getElementById('ct').innerHTML = str + "," + tz;
display_c()
}
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('disp_TZ()',refresh)
}
</script>
HTML part is here
<span id='ct' style="background-color: #FFFF00">Select one time zone </span>
<form method=post name=f1>
<select name=tz onChange=disp_TZ()>
</select>
</form>
Adding default time zone
We will assign one default option to the drop down time zone list.
for (i=0;i<my_timezones.length;i++)
{
addOption(document.f1.tz,my_timezones[i],my_timezones[i]);
if(my_timezones[i]=='Asia/Kolkata'){
document.f1.tz.options[i].selected=true;
}
}
If you want the clock to show the default list ( time zone ) value then just call the function before closing the script tag.
disp_TZ() // to show time while loading the page
</script>