Posted By
Bajarangi soft ,
Posted On 12-10-2020
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>
BAJARANGI SOFT
</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: #e79c2a; ">
</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>