How to change dropdown menu when time is changed ?

24 Jun, 2020
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.
<!DOCTYPE HTML><html>  <head>    <title>        How to change dropdown         menu when time is changed?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
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.
<!DOCTYPE HTML><html>  <head>    <title>        How to change dropdown         menu when time is changed?    </title>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </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>
Output:
JavaScript-Misc
Picked
CSS
HTML
JavaScript
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.