<!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
>