Displaying changing clock with date for user selected time zone from a JavaScript dropdown list box

We will display the clock by taking one fixed time zone. To display a changing clock we will use one timer function to trigger the display part in every one second interval.

After displaying the clock using fixed time zone, we can show one dropdown listbox to user to select one of the all time zones of the world. On Select of the time zone the onChange() event of the dropdown list box will trigger the display clock part ( function ) we already written.
List of time zones is available as a JavaScript array in above line and the same can be copied. The JavaScirpt array is prepared using PHP script at backend.
Using the array elements (of timezones) we can add options to the dropdown list box by using one for loop. Inside the forloop we will call one function to insert the options to the drop down list box.
After creating the dropdown list box , onChange event will trigger the display clock and the changing clock of selected time zone is displayed.
There are various options can be added while displaying the clock.
#timezoneclock #worldtimezoneclock #timeoftheworld

[MR.dev]

Thank you so much for this video its was very helpful.

[sharanjeetaulakh]

Hi, is it possible to get only names of cities or countries displaying in the dropdown, not continents?

[PujariOfficial]

Video is very helpful, I just have one more doubt on how to set India’s date and time as default and then we can have the options in drop down to select different time zones. Please help to crack this.

[mjay]

Hello, thanks alot for the tutorial, but i have a problem, it shows Uncaught TypeError: Cannot read properties of undefined (reading 'options')
at addOption (index.html:39)
at index.html:33