How to change dropdown menu when time is changed ?

Last Updated : 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> 