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: