How to change dropdown menu when time is changed ?

The task is to change the drop-down menu when time is changed. There are two approaches that are discussed below.

Approach 1: Use the setTimeOut() method and execute the code of changing menu after some amount of time.

Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change dropdown 
        menu when time is changed?
    </title>
  
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
  
    <p id="GFG_UP"></p>
  
    <select id="select">
        <option value="1">GFG1</option>
        <option value="2">GFG2</option>
        <option value="3">GFG3</option>
        <option value="4">GFG4</option>
        <option value="5">GFG5</option>
    </select>
    <br><br>
  
    <button>
        Click here
    </button>
      
    <p id="GFG_DOWN" style="font-size: 23px; 
        font-weight: bold; color: green; ">
    </p>
    <script>
        var elUp = document.getElementById("GFG_UP");
        var elDown = document.getElementById("GFG_DOWN");
        elUp.innerHTML = "Click on the button "
            + "to change the dropdown list "
            + "after 4 seconds";
        $('button').click(function () {
            setTimeout(
                function () {
                    $("#select option[value=1]")
                                .text('GFG_N');
                    elDown.innerHTML 
                        = "Drop-down menu changed";
                }, 4000);
        })        
    </script>
</body>
  
</html>

chevron_right


Output:

Approach 2: Use the Date() method to get the current DateTime object and then declare the other DateTime object whenever the menu will be changed using setSeconds() and getSeconds() method.



Example: This example implements the above approach.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change dropdown 
        menu when time is changed?
    </title>
  
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <p id="GFG_UP">
    </p>
    <select id="select">
        <option value="1">GFG1</option>
        <option value="2">GFG2</option>
        <option value="3">GFG3</option>
        <option value="4">GFG4</option>
        <option value="5">GFG5</option>
    </select>
    <br>
    <br>
    <button>
        Click here
    </button>
    <p id="GFG_DOWN" style="font-size: 23px; 
        font-weight: bold; color: green; ">
    </p>
    <script>
        var elUp = document.getElementById("GFG_UP");
        var elDown = document.getElementById("GFG_DOWN");
        elUp.innerHTML = "Click on the button to "
                + "change the dropdown list after "
                + "5 seconds of current time";
        $('button').click(function () {
            var d1 = new Date();
            var d2 = new Date();
            d2.setSeconds(d1.getSeconds() + 5);
            setTimeout(
                function () {
                    $("#select option[value=1]")
                                    .text('GFG_N');
                    elDown.innerHTML 
                        = "Drop-down menu changed";
                }, d2 - d1);
        })        
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.