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.
<!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> |
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= </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:
Please Login to comment...